Enable Sign-in with Google
AppLaunchKit leverages environment variables to securely store sensitive information like your OAuth Client IDs and secrets. These variables are set on Google Cloud Console and referenced within your application to communicate with the Google server to carry out authentication. This guide walks you through the steps to configure Google sign-in functionality:
Create a GCP Project
- Log in to the GCP console using your Google account credentials.
- Click on the “Select a project” dropdown in the top navigation bar and choose “Create project”.
- Enter a unique and descriptive name for your project (e.g., “your-app-name”).
- Click on the “Create” button.
- Select the newly created project if not already selected.
Configure OAuth Consent Screen
- In the left navigation menu within the project dashboard, click on “OAuth consent screen”.
- Within this screen, choose how you want to configure and register your app, including your target users. You can only associate one app with your project.
- Provide the required details and click the “Save and Continue” button.
Create OAuth Client IDs
- In the left navigation menu within the project dashboard, click on “Credentials”.
- Click on the “Create credentials” button in the header and select “OAuth client ID”.
- Create credentials for all your target platforms.
Note:
These details will be required to configure your client applications and Supabase server.
Configure Supabase to Enable Google Sign-In
- Local Setup
- Find the
config.toml
file inapps/supabase/supabase
directory. - search for
[auth.external.google]
, - change the value
enabled = false
intoenabled = true
.
- Find the
- Deployed
- Go to the supabase dashboard.
- Select
Authentication
on the side bar. - Click on
Providers
in theConfiguration
section. - Here you can enable the
Google
provider and put in the respectice env.
Configuring Environment Variables
Values obtained from above steps. Add them in the respective .env
files:
Add these keys in .env.development
file in Expo app
Add these keys in .env.development
file in Next.js app
Codebase changes
After getting all the env variables, you need search for the below files
and uncomment the call of
After doing so, you need to follow these steps.
- Run the expo app in development mode, using the command
npm run expo:ios-dev-build
- Go to the file
apps/expo/ios/AppLaunchKit/Info.plist
- Find the code where this is written :
- Add this line after these two lines, and leave everything as it, You need to do the same whenever either you change the app.json file or new clone.
Now, You can start using google login feature in your app.
Conclusion
After following the above steps, you would be able to see a google login button on /signup
and /signin
routes respectively. And can login using valid Google ID.
Note:
Google SignIn and SignUp does not work with ExpoGO as expo doesn’t support it, If you need to test it locally, you can run the app in development build mode.