Skip to content

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.
  • 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

Terminal window
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

Terminal window
NEXT_PUBLIC_GOOGLE_CLIENT_ID_WEB=

Codebase changes

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

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

and uncomment the call of

Terminal window
  <GoogleSignInButton />

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 : 
    <string>myapp</string>
    <string>com.applaunchkit.demo</string>
  • 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. 
    <string>GOOGLE_CLIENT_ID_IOS_REVERSED</string>
    # if GOOGLE_CLIENT_ID_IOS=1234567890-1some2thing3here234yes.apps.googleusercontent.com
    # then GOOGLE_CLIENT_ID_IOS_REVERSED=com.googleusercontent.apps.1234567890-1some2thing3here234yes

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.