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 in apps/supabase/supabase directory.
  • search for [auth.external.google],
  • change the value enabled = false into enabled = true.
• Deployed
  • Go to the supabase dashboard.
  • Select Authentication on the side bar.
  • Click on Providers in the Configuration 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

EXPO_PUBLIC_GOOGLE_CLIENT_ID_IOS=
EXPO_PUBLIC_GOOGLE_CLIENT_ID_IOS_REVERSED=
EXPO_PUBLIC_GOOGLE_CLIENT_ID_ANDROID=
EXPO_PUBLIC_GOOGLE_CLIENT_ID_WEB=

Add these keys in .env.development file in Next.js app

NEXT_PUBLIC_GOOGLE_CLIENT_ID_WEB=

Codebase changes

After getting all the env variables, you need search for the below files

 packages/components/custom/auth/SignInForm.tsx
 packages/components/custom/auth/SignUpForm.tsx

and uncomment the call of

  <GoogleSignInButton />

After doing so, you need to follow these steps.

• Go to app.json file and add this plugin.

[
        "@react-native-google-signin/google-signin",
        {
          "iosUrlScheme": <YOUR_IOS_URL_SCHEME> // check in google console
        }
      ]

• Uncomment all the options required for google signin in the file custom/auth/GoogleSignInButton.tsx

• Also, enable and add these in supabase dashboard.

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.