Instant supports logging users in with their Google account. There are a few ways to do this: it depends on whether you are building for web or React Native.

Choose the option that sounds best to you, and the rest of the document will show you how to add Sign in with Google to your app.

#Overview

There are three main steps:

1. Google Console: Set up your consent screen and create an Oauth client.
2. Instant Dashboard: Connect your Oauth client to Instant
3. Your app: Add some code to log in with Google!

Let's dive deeper in each step:

#1. Set up your consent screen and create an Oauth client

Head on over to Google Console. You should be in the "Credentials" section.

Configure your Google OAuth consent screen

• Click "CONFIGURE CONSENT SCREEN." If you already have a consent screen, you can skip to the next step.
• Select "External" and click "CREATE".
• Add your app's name, a support email, and developer contact information. Click "Save and continue".
• No need to add scopes or test users. Click "Save and continue" for the next screens. Until you reach the "Summary" screen, click "Back to dashboard".

Create an OAuth client for Google

For native auth, each platform needs an Oauth Client. If you support both iOS or Android for example, you'll create two clients. Here are the steps:

• From Google Console, click "+ CREATE CREDENTIALS"
• Select "OAuth client ID"
• Select "iOS" or "Android" as the application type.
• Fill in your bundle information.

And with that you're ready!

#2. Connect your Oauth client to Instant

Go to the Instant dashboard and select the Auth tab for your app. For each Oauth Client you created, add it to Instant:

• Click "Set up Google"
• Enter your "Client ID"
• Make sure "skip nonce checks" is enabled.
• Click "Add Client"

And voila, you are connected!

#3. Add some code!

Method: Native Auth

You can use react-native-google-signin/google-signin, to authenticate natively on Google.

There are three steps:

1. Set up google-signin on Expo
2. Use the Sign in Button to auth with Google and get an idToken
3. Pass the token on to db.auth.signInWithIdToken, and you are logged in!

Let's do that.

Set up google-signin on Expo

First, let's install the package:

npx expo install @react-native-google-signin/google-signin

Then, follow the google-signin installation instructions to set it up with Expo.

Use google-signin to log in with Google!

Now you're ready to add the Google Signin button to your expo app! Here's a full example:

import { View, Text, Button, StyleSheet } from 'react-native';
import { init } from '@instantdb/react-native';
import {
  GoogleSignin,
  GoogleSigninButton,
} from '@react-native-google-signin/google-signin';
 
const APP_ID = '__APP_ID__';
const db = init({ appId: APP_ID });
 
GoogleSignin.configure({
  // See https://react-native-google-signin.github.io/docs/original#configure
  iosClientId: 'YOUR_IOS_CLIENT_ID',
});
 
function App() {
  return (
    <>
      <db.SignedIn loading={<Text>Loading...</Text>}>
        <UserInfo />
      </db.SignedIn>
      <db.SignedOut>
        <Login />
      </db.SignedOut>
    </>
  );
}
 
function UserInfo() {
  const user = db.useUser();
  return <Text>Hello {user.email}!</Text>;
}
 
function Login() {
  return (
    <GoogleSigninButton
      size={GoogleSigninButton.Size.Wide}
      color={GoogleSigninButton.Color.Dark}
      onPress={async () => {
        // 1. Sign in to Google
        await GoogleSignin.hasPlayServices();
        const userInfo = await GoogleSignin.signIn();
        const idToken = userInfo.data?.idToken;
 
        if (!idToken) {
          console.error('no ID token present!');
          return;
        }
        // 2. Use your token, and sign into InstantDB!
        try {
          const res = await db.auth.signInWithIdToken({
            // The unique name you gave the OAuth client when you
            // registered it on the Instant dashboard
            clientName: 'YOUR_INSTANT_AUTH_CLIENT_NAME',
            idToken,
          });
          console.log('logged in!', res);
        } catch (error) {
          console.log('error signing in', error);
        }
      }}
    />
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
 
export default App;