Instant supports logging in your users with their Google account. We support flows for Web and React Native. Follow the steps below to get started.

Step 1: Configure OAuth consent screen Go to the Google Console.

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

Step 2: 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.

Step 3: Register your OAuth client with Instant

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

Register a Google client and enter the client id and client secret from the OAuth client that you created.

Step 4: 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.

Step 5: Add login to your app

The next sections will show you how to use your configured OAuth client with Instant.

Native button for Web

You can use Google's Sign in Button with Instant. You'll use db.auth.SignInWithIdToken to authenticate your user. The benefit of using Google's button is that you can display your app's name in the consent screen.

First, make sure that your website is in the list of "Authorized JavaScript origins" for your Google client on the Google console.

If you're using React, the easiest way to include the signin button is through the @react-oauth/google package.

npm install @react-oauth/google

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>
  );
}

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',
  });
}