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: Web Redirect

If you don't want to use the google styled buttons, you can use the redirect flow instead.

Create an authorization URL via db.auth.createAuthorizationURL and then use the url to create a link. Here's a full example:

'use client';
 
import React, { useState } from 'react';
import { init } from '@instantdb/react';
 
const APP_ID = '__APP_ID__';
 
const db = init({ appId: APP_ID });
 
const url = db.auth.createAuthorizationURL({
  // Use the google client name in the Instant dashboard auth tab
  clientName: 'REPLACE_ME',
  redirectURL: window.location.href,
});
 
import React from 'react';
 
export default function App() {
  return (
    <>
      <db.SignedIn>
        <UserInfo />
      </db.SignedIn>
      <db.SignedOut>
        <Login />
      </db.SignedOut>
    </>
  );
}
 
function UserInfo() {
  const user = db.useUser();
  return <h1>Hello {user.email}!</h1>;
}
 
function Login() {
  return <a href={url}>Log in with Google</a>;
}

When your users clicks on the link, they'll be redirected to Google to start the OAuth flow and then back to your site.

Instant will automatically log them in to your app when they are redirected!