Expo Supabase Auth Config
Docs:
Supabase Auth Config
Create and account on https://supabase.com
Create a new project
Go to
Project Settings > API
Copy the
URL
andKey
and add it to the.env
file as below (.env.example
):bashEXPO_PUBLIC_SUPABASE_URL=<url> EXPO_PUBLIC_SUPABASE_KEY=<key>
EXPO_PUBLIC_SUPABASE_URL=<url> EXPO_PUBLIC_SUPABASE_KEY=<key>
screenshot
Supabase Google Sign In
Google Console API
Select the project you created before
Click on
Create Credentials
and selectOAuth client ID
Select
Web application
and fill in the required fields and clickCreate
screenshot
Copy the
Client ID
and add it to the.env
file as below (.env.example
):bashEXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID=<client-id>
EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID=<client-id>
Save the
Client Secret
for later. You will need it to configure theSupabase Google Provider
Supabase Google Config
- Go to
Authentication > Providers
- Enable
Google
and add theClient ID
andClient Secret
from theGoogle Console API
section abovescreenshot
- Click
Save
Supabase Apple Sign In Config
Apple Developer Portal config
1. Create an App ID
- Go to https://developer.apple.com/account/resources/identifiers
- Click on
Identifiers
and then+
- Select
App IDs
and clickContinue
- Select
App
and clickContinue
- Fill in the required fields:
- Description: Enter a description for your App ID
- Bundle ID: Use the one from
app.json
inexpo.ios.bundleIdentifier
- Capabilities: Select
Sign In with Apple
- Click
Continue
and thenRegister
INFO
If you already have an App ID, you can edit it and add the Sign In with Apple
capability.
2. Create a Service ID
- Go to https://developer.apple.com/account/resources/identifiers
- Click on
Identifiers
and then+
- Select
Services IDs
and clickContinue
- Fill in the required fields:
- Description: Enter a description for your Service ID
- Identifier: Use the one from
app.json
inexpo.ios.bundleIdentifier
with a suffix ofservice
- Click
Continue
and thenRegister
- Go back to the
Identifiers
page and select theService ID
you just created- Select
Sign In with Apple
and clickConfigure
- Select the App ID you created before as the
Primary App ID
and clickSave
- Add to
Domains and Subdomains
theURL
from theSupabase Auth Config
section above - Add to
Return URLs
the SupabaseURL
with the path/auth/v1/callback
- Click
Next
and thenDone
to close the modal - Click
Continue
and thenSave
- Select
3. Create a Key
- Go to https://developer.apple.com/account/resources/authkeys/
- Click on
Keys
and then+
- Fill in the required fields:
- Key Name: Enter a name for your key
- Sign In with Apple: Select the
Sign In with Apple
capability- Click
Configure
and select the App ID you created before
- Click
- Click
Continue
and thenRegister
- Download the
.p8
file- We will need to create a jwt token with this file later
Supabase Apple Config
- Go to https://supabase.com/docs/guides/auth/social-login/auth-apple#configuration-web
- Here we wil luse the
.p8
file we downloaded from theApple Developer Portal
section above to generate ajwt token
- Upload the file and enter the
Account ID
andService ID
from theApple Developer Portal
section aboveAccount ID
can be found at the top right corner of theApple Developer Portal
pageService ID
can be found in theService ID
page. It's theIdentifier
field
- Here we wil luse the
- Go to
Authentication > Providers
- Enable
Apple
- Add the
Service ID
andSecret Key (jwt)
- Add to the
Authorized Client IDs
theApp ID
you created before. It should be the same as theBundle ID
inapp.json
inexpo.ios.bundleIdentifier
.
- Add the
Supabase Client config
git commit: supabase config #b5ae9b5
- In the project, install
supbase-js
and required dependencies:
npx expo install @supabase/supabase-js @react-native-async-storage/async-storage react-native-url-polyfill
- create a
supabase
client: utils/Supabase.ts
Google Sign In with Supabase
- Modify the
App.tsx
andGoogleSignIn.tsx
to use thesupabase
client:- Follow the changes on this commit
Apple Sign In with Supabase
- Modify the
App.tsx
andAppleSignIn.tsx
to use thesupabase
client:- Follow the changes on this commit