Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/MomenSherif/react-oauth/llms.txt

Use this file to discover all available pages before exploring further.

Automatic sign-in lets Google sign a user in without any interaction when there is exactly one Google session active and the user has previously consented. It works in combination with One Tap and fires silently in the background.
Automatic sign-in only fires when there is a single active Google account in the browser. If the user has multiple accounts logged in, Google will show the account picker instead.

​
How it works

When auto_select is enabled:
  1. Google checks for an existing session and prior consent.
  2. If a single eligible account is found, Google signs the user in automatically.
  3. Your onSuccess callback is called with select_by: "auto" in the credential response.
  4. If no eligible session is found, nothing happens — the user must sign in manually.

​
Enabling automatic sign-in

​
With GoogleLogin

import { GoogleLogin } from '@react-oauth/google';

<GoogleLogin
  onSuccess={credentialResponse => {
    console.log(credentialResponse);
    // credentialResponse.select_by === 'auto' when auto sign-in fires
  }}
  onError={() => {
    console.log('Login failed');
  }}
  auto_select
/>

​
With useGoogleOneTapLogin

import { useGoogleOneTapLogin } from '@react-oauth/google';

function App() {
  useGoogleOneTapLogin({
    onSuccess: credentialResponse => {
      console.log(credentialResponse);
    },
    onError: () => {
      console.log('Login failed');
    },
    auto_select: true,
  });

  return <div>Your app</div>;
}

​
Detecting automatic sign-in

You can tell an auto sign-in occurred by checking select_by in the credential response: 
useGoogleOneTapLogin({
  onSuccess: credentialResponse => {
    if (credentialResponse.select_by === 'auto') {
      console.log('User was automatically signed in');
    } else {
      console.log('User signed in manually');
    }
  },
  auto_select: true,
});
Possible values of select_by include: auto, user, user_1tap, user_2tap, btn, btn_confirm, btn_add_session, btn_confirm_add_session.

​
UX considerations

Automatic sign-in happens without any visible prompt. Use it only when users expect to be signed in on return visits, such as a dashboard or members-only area. Avoid it on public landing pages where sign-in may be unexpected.
Always make it easy for users to sign out. If a user is auto-signed-in unexpectedly, a visible sign-out option prevents frustration. Remember to call googleLogout() on sign-out to prevent re-triggering automatic sign-in. See Logging Out.

​
Full example

import { useGoogleOneTapLogin, googleLogout } from '@react-oauth/google';
import { useState } from 'react';

function App() {
  const [user, setUser] = useState<{ credential: string } | null>(null);

  useGoogleOneTapLogin({
    disabled: !!user, // Don't show prompt if already signed in
    onSuccess: credentialResponse => {
      setUser({ credential: credentialResponse.credential! });
    },
    auto_select: true,
  });

  const handleLogout = () => {
    googleLogout();
    setUser(null);
  };

  if (user) {
    return (
      <div>
        <p>Signed in</p>
        <button onClick={handleLogout}>Sign out</button>
      </div>
    );
  }

  return <p>Not signed in</p>;
}

Build docs developers (and LLMs) love

Get started for freeTalk to us