React Setup

In this guide, you'll learn how to create a React app and initialize it with the Okto SDK, including setting up authentication using Google OAuth and the Okto Provider.

You can create an Okto-powered application in three different ways. Choose the approach that best suits your needs:

Traditional Create React App setup with manual configuration:
Best for developers who need full control and customization over their project.
Streamlined Okto React setup:
The easiest way to get started with a pre-configured setup.
Streamlined Okto Next.js-based setup:
Ideal for Next.js developers looking to leverage Okto with minimal configuration.

This approach uses Create React App and manually configures the Okto SDK. This gives you the most control over your setup and is great if you need to integrate Okto into an existing React application.

Create React App

Run the following commands in your terminal to create a new React app:

bash

npx create-react-app my-okto-app
cd my-okto-app

This sets up a new React project in the folder my-okto-app with all the default settings.

Install the Okto SDK

Run the following commands to add Okto's SDK and Google OAuth to your project. Choose the command that matches your package manager:

npm i okto-sdk-react @react-oauth/google

This installs the SDK and adds it as a dependency in your project.

Initialize Okto SDK

To get started with authentication, we'll initialize the Google OAuth provider in the index.js file.

index.js

    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import { GoogleOAuthProvider } from '@react-oauth/google';
    import App from './App';
 
    const root = ReactDOM.createRoot(document.getElementById('root'));
    const GOOGLE_CLIENT_ID = "YOUR_GOOGLE_CLIENT_ID"
    root.render(
        <React.StrictMode>
            <GoogleOAuthProvider clientId = {GOOGLE_CLIENT_ID}>
                <App />
            </GoogleOAuthProvider>
        </React.StrictMode>
    );

View here

Initialize Google OAuth Provider

Now, let's set up the Okto provider in your App.js:

App.js

 import React from 'react';
 import { OktoProvider, BuildType } from 'okto-sdk-react';
 import LoginPage from './LoginPage';
 
 const OKTO_CLIENT_API_KEY = "OKTO_CLIENT_API_KEY";
 
 function App() {
     return (
         <OktoProvider apiKey={OKTO_CLIENT_API_KEY} buildType={BuildType.SANDBOX}>
             <LoginPage/>
         </OktoProvider>
     );
 }
 export default App;

View here

Now, we will create a sample LoginPage.js file to test out our functionalities:

LoginPage.js

    import React, { useState } from "react";
    import { useOkto } from "okto-sdk-react";
    import { GoogleLogin } from "@react-oauth/google";
 
    function LoginPage() {
    const { authenticate } = useOkto();
    const [authToken, setAuthToken] = useState(null);
 
    const handleGoogleLogin = async (credentialResponse) => {
     const idToken = credentialResponse.credential;
      authenticate(idToken, (authResponse, error) => {
          if (authResponse) {
            setAuthToken(authResponse.auth_token);
            console.log("Authenticated successfully, auth token:", authResponse.auth_token);
          } else if (error) {
                console.error("Authentication error:", error);
            }
        });
     };
 
     return (
        <div>
            <h1>Login</h1>
            {!authToken ? (
            <GoogleLogin
                onSuccess={handleGoogleLogin}
                onError={(error) => console.error("Login Failed", error)}
            />
            ) : (
                <p>Authenticated</p>
            )}
        </div>
        );
    }
 
    export default LoginPage;

View here

Congratulations!

🎉 Congratulations! You now have a basic dApp powered by Okto. You can focus on your business logic and UI/UX now. You can checkout how to use other features in the Template Repo.

For more details, refer to the Template Repo and the Okto SDK Cheatsheet for commonly used methods and configurations.

React Setup

Create React App

Install the Okto SDK

Initialize Okto SDK

Initialize Google OAuth Provider

Sample Login Page

Congratulations!

On this page