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

• 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

Go to the Instant dashboard and select the Auth tab for your app.

Add your Oauth Client on Instant

• Click "Set up Google"
• Enter your "Client ID"
• Enter your "Client Secret"
• Check "I added the redirect to Google" (make sure you actually did this!)
• Click "Add Client"

And voila, you are connected!

Register your website with Instant

In the Auth tab, add the url of the websites where you are using Instant to the Redirect Origins. If you're testing from localhost, add http://localhost:3000, replacing 3000 with the port you use. For production, add your website's domain.

3. Add some code!

Method: Google Sign in Button for Web

We'll use Google's pre-built Sign in Button. The benefit of using Google's button is that you can display your app's name in the consent screen.

There two steps to the code:

1. Use the Sign in Button to auth with Google and get an idToken
2. Pass the token on to db.auth.signInWithIdToken, and you are logged in!

Let's do that.

Using React

If you're using React, the easiest way to include the Sign in Button is through the @react-oauth/google package:

npm install @react-oauth/google

Once you install it, include the button, and use db.auth.signInWithIdToken to complete sign in. Here's a full example:

'use client';

import React, { useState } from 'react';
import { init } from '@instantdb/react';
import { GoogleOAuthProvider, GoogleLogin } from '@react-oauth/google';

const APP_ID = '__APP_ID__';

const db = init({ appId: APP_ID });

// e.g. 89602129-cuf0j.apps.googleusercontent.com
const GOOGLE_CLIENT_ID = 'REPLACE_ME';

// Use the google client name in the Instant dashboard auth tab
const GOOGLE_CLIENT_NAME = 'REPLACE_ME';

function App() {
  const { isLoading, user, error } = db.useAuth();
  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Uh oh! {error.message}</div>;
  }
  if (user) {
    return <h1>Hello {user.email}!</h1>;
  }

  return <Login />;
}

function Login() {
  const [nonce] = useState(crypto.randomUUID());

  return (
    <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
      <GoogleLogin
        nonce={nonce}
        onError={() => alert('Login failed')}
        onSuccess={({ credential }) => {
          db.auth
            .signInWithIdToken({
              clientName: GOOGLE_CLIENT_NAME,
              idToken: credential,
              // Make sure this is the same nonce you passed as a prop
              // to the GoogleLogin button
              nonce,
            })
            .catch((err) => {
              alert('Uh oh: ' + err.body?.message);
            });
        }}
      />
    </GoogleOAuthProvider>
  );
}

Not using React?

If you're not using React or prefer to embed the button yourself, refer to Google's docs on how to create the button and load their client library

When creating your button, make sure to set the data-ux_mode="popup". Your data-callback function should look like:

async function handleSignInWithGoogle(response) {
  await db.auth.signInWithIdToken({
    // Use the google client name in the Instant dashboard auth tab
    clientName: 'REPLACE_ME',
    idToken: response.credential,
    // make sure this is the same nonce you set in data-nonce
    nonce: 'REPLACE_ME',
  });
}