Authenticate – Okto Docs

When a user enters our app, seamless authentication becomes the key to their personalized experience. Using the power of Google OAuth2 (opens in a new tab), we establish user identity efficiently.

After a successful log in, Google OAuth2 provides a unique identifier called token_id – think of it as their digital fingerprint. This token_id becomes crucial for Okto wallet authentication and, if needed, for creating new wallets.

Let's get coding and see how we can use the token_id and authenticate to authenticate with Okto.

Note: if you just want to test and see how it works, you can use the following steps to get a token_id and go directly to the Authenticate with Okto section.

Setup Google Sign-In

We will first set up the Google Sign-In library in our project. This involves installing the @react-native-google-signin (opens in a new tab) package and configuring it.

bash

pnpm i @react-native-google-signin/google-signin

Now we need to configure Google. Now, we will need a web client id which if you don't have, you can use the following steps (opens in a new tab) to get one. Once you have the client id we can configure the Google Sign-In library.

screens/login.tsx

import { GoogleSignin } from "@react-native-google-signin/google-signin";
 
const webClientId = "YOUR_WEB_CLIENT_ID";
GoogleSignin.configure({
    // Update scopes as needed in your app
    scopes: ["email", "profile"],
    webClientId
});

Handle Google Sign-In

Now that we have set up the Google Sign-In library, let's handle the sign-in process. Create a new screen and name it login.tsx. In this file, create a function to handle the Google Sign-In process, and call this function when the user presses a button.

screens/login.tsx

import { GoogleSignin } from "@react-native-google-signin/google-signin";
import { Text, Pressable } from "react-native";
 
...
 
const LoginScreen = () => {
 
    async function handleGoogleSignIn() {
        try {
            await GoogleSignin.hasPlayServices();
            const response = await GoogleSignin.signIn();
 
            const { idToken } = response;
 
        } catch (error) {
            console.log("Something went wrong. Please try again");
        }
    }
 
    return (
        <Pressable onPress={handleGoogleSignIn}>
            <Text>Connect with Google</Text>
        </Pressable>
    );
};

Authenticate with Okto

Now that we have obtained the idToken from Google, we can use it to authenticate with Okto. Utilize the authenticate function from the SDK to perform authentication with Okto.

Note: The idToken expires in 30 minutes, so it is recommended to authenticate with Okto as soon as possible after obtaining the idToken, or the authenticate process will fail.

screens/login.tsx

import {
  useOkto,
  type OktoContextType,
} from 'okto-sdk-react-native';
...
 
const LoginScreen = () => {
    const { authenticate } = useOkto() as OktoContextType;
 
    ...
 
    async const handleGoogleSignIn(){
        try {
            ...
            const { idToken } = response;
            authenticate(idToken, (result, error) => {
                if (result) {
                    console.log('authentication successful');
                }
                if (error) {
                    console.error('authentication error:', error);
                }
            });
        } catch (error) {
            console.log("Something went wrong. Please try again");
        }
    }
}

Existing user

If the user already has an Okto wallet, the result will contain the authentication status

New user

If the user does not have an Okto wallet, they will get a UI prompt to create a new wallet.

After a successful authentication, the result will contain the authentication status. You can use this information to determine if the user has authenticated or not.

📱

We have a react native sample app integrated with Okto SDK that you can use as a starting point. You can find it here (opens in a new tab)

Google Authentication Setup Fetch User