Native Login With Google

React Native Google Login

Unlike the OAuth flow which requires the use of a web browser, the native Sign in with Google flow on Android uses the operating system's built-in functionalities to prompt the user for consent. Note that native sign-in has been rebranded as One Tap sign-in on Android by Google, which you should not confuse with One Tap sign in for web, as mentioned below.

When the user provides consent, Google issues an identity token (commonly abbreviated as ID token) that is then sent to your project's Openfort Auth server. When valid, a new user session is started by issuing an access and refresh token from Openfort Auth.

By default, Openfort Auth implements nonce validation during the authentication flow. This can be disabled in production under Authentication > Providers > Google > Skip Nonce Check in the Dashboard, or when developing locally by setting auth.external.<provider>.skip_nonce_check. Only disable this if your client libraries cannot properly handle nonce verification.

Make sure you have configured your Google credentials in the Openfort dashboard. Follow the configuration steps.

When working with Expo, you can use the react-native-google-signin/google-signin library library to obtain an ID token that you can pass to openfort-js authenticateThirdParty method.

Follow the Expo installation docs for installation and configuration instructions. See the openfort-js reference for instructions on initializing the openfort-js client in React Native.

./components/Auth.native.tsx

import {
  GoogleSignin,
  GoogleSigninButton,
  statusCodes,
} from '@react-native-google-signin/google-signin'
// the initialized instance of openfort-js client
import { openfort } from '../utils/openfort'
export default function () {
  GoogleSignin.configure({
    scopes: ['https://www.googleapis.com/auth/drive.readonly'],
    webClientId: 'YOUR CLIENT ID FROM GOOGLE CONSOLE',
  })
  return (
    <GoogleSigninButton
      size={GoogleSigninButton.Size.Wide}
      color={GoogleSigninButton.Color.Dark}
      onPress={async () => {
        try {
          await GoogleSignin.hasPlayServices()
          const userInfo = await GoogleSignin.signIn()
          if (userInfo.data.idToken) {
            const { data, error } = await openfort.loginWithIdToken({
              provider: OAuthProvider.GOOGLE,
              token: userInfo.data.idToken,
            })
            console.log(error, data)
          } else {
            throw new Error('no ID token present!')
          }
        } catch (error: any) {
          if (error.code === statusCodes.SIGN_IN_CANCELLED) {
            // user cancelled the login flow
          } else if (error.code === statusCodes.IN_PROGRESS) {
            // operation (e.g. sign in) is in progress already
          } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
            // play services not available or outdated
          } else {
            // some other error happened
          }
        }
      }}
    />
  )
}