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:

#Quick start: developer credentials

If you're testing Google sign-in locally, we have a fast option for you. Instant provides developer credentials that you can use for local development.

You don't need to go to the Google Cloud Console, and you can log in within minutes.

npx instant-cli@latest auth client add \
  --type google --app-type web --name google-web --dev-credentials

And you're done. You can go straight to code.

#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

• From Google Console, click "+ CREATE CREDENTIALS"
• Select "OAuth client ID"
• Select "Web application" as the application type.

• Add https://api.instantdb.com/runtime/oauth/callback as an Authorized redirect URI.

• If you're testing from localhost, add both http://localhost and http://localhost:3000 to "Authorized JavaScript origins", replacing 3000 with the port you use.
• For production, add your website's domain.

And with that you have your Oauth client!

#2. Connect your Oauth client to Instant

Add your Oauth Client on Instant

npx instant-cli@latest auth client add \
  --type google --app-type web --name google-web \
  --client-id <id> --client-secret <secret>

#3. Add some code!

Method: Expo Web Auth

Instant comes with support for Expo's AuthSession library. To use it, you need to:

1. Set up AuthSession
2. Register your app with Instant
3. Use AuthSession to log in with Google!

Let's do that.

Set up AuthSession

If you haven't already, follow the AuthSession installation instructions from the Expo docs.

Next, add the following dependencies:

npx expo install expo-auth-session expo-crypto

Update your app.json with your scheme:

{
  "expo": {
    "scheme": "mycoolredirect"
  }
}

Register your app with Instant

Now that you have your App Scheme, it's time to tell Instant about it. For development with expo, add exp:// and your scheme (e.g. mycoolredirect://) as redirect origins.

From the dashboard

From the Auth tab on the Instant dashboard, add a redirect origin of type "App scheme".

From the terminal

npx instant-cli@latest auth origin add --type custom-scheme --scheme exp://
npx instant-cli@latest auth origin add --type custom-scheme --scheme mycoolredirect://

Use AuthSession to log in with Google!

And from here you're ready to add a login 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 {
  makeRedirectUri,
  useAuthRequest,
  useAutoDiscovery,
} from 'expo-auth-session';
 
const APP_ID = '__APP_ID__';
const db = init({ appId: APP_ID });
 
function App() {
  return (
    <>
      <db.SignedIn>
        <UserInfo />
      </db.SignedIn>
      <db.SignedOut>
        <Login />
      </db.SignedOut>
    </>
  );
}
 
function UserInfo() {
  const user = db.useUser();
  return <Text>Hello {user.email}!</Text>;
}
 
function Login() {
  const discovery = useAutoDiscovery(db.auth.issuerURI());
  const [request, _response, promptAsync] = useAuthRequest(
    {
      // The unique name you gave the OAuth client when you
      // registered it on the Instant dashboard
      clientId: 'YOUR_INSTANT_AUTH_CLIENT_NAME',
      redirectUri: makeRedirectUri(),
    },
    discovery,
  );
 
  return (
    <Button
      title="Log in"
      disabled={!request}
      onPress={async () => {
        try {
          const res = await promptAsync();
          if (res.type === 'error') {
            alert(res.error || 'Something went wrong');
          }
          if (res.type === 'success') {
            await db.auth
              .exchangeOAuthCode({
                code: res.params.code,
                codeVerifier: request.codeVerifier,
              })
              .catch((e) => alert(e.body?.message || 'Something went wrong'));
          } else {
          }
        } catch (e) {
          console.error(e);
        }
      }}
    ></Button>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
 
export default App;