Blogs

Add Environment Variables (.env)

REACT_APP_OKTA_CLIENT_ID=your_client_id

REACT_APP_OKTA_ISSUER=https://dev-xxxx.okta.com/oauth2/default

REACT_APP_OKTA_REDIRECT_URI=http://localhost:3000/login/callback

Minimal App.js Implementation

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Security, LoginCallback, useOktaAuth } from "@okta/okta-react";
import { OktaAuth } from "@okta/okta-auth-js";
const oktaAuth = new OktaAuth({
  issuer: process.env.REACT_APP_OKTA_ISSUER,
  clientId: process.env.REACT_APP_OKTA_CLIENT_ID,
  redirectUri: process.env.REACT_APP_OKTA_REDIRECT_URI,
});

function Home () {
  const { authState, oktaAuth } = useOktaAuth();
  return (
    <div>
      <h1>Home Page</h1>
      {authState?.isAuthenticated ? (
        <button onClick={() => oktaAuth.signOut()}>Logout</button>
      ) : (
        <button onClick={() => oktaAuth.signInWithRedirect()}>Login</button>
      )}
    </div>
  );
}

function Dashboard() {
  const { authState, oktaAuth } = useOktaAuth();
  if (!authState) return <div>Loading...</div>;
  if (!authState.isAuthenticated) {
    oktaAuth.signInWithRedirect();
    return null;
  }
  return <h2>Welcome to Dashboard </h2>;
}


export default function App() {
  return (
    <BrowserRouter>
      <Security oktaAuth={oktaAuth}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login/callback" element={<LoginCallback />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </Security>
    </BrowserRouter>
  );
}

8. Common Mistakes to Avoid

• Storing tokens in localStorage
• Trying to manage passwords in frontend
• Not configuring redirect URI properly
• Skipping PKCE flow

Final Thoughts

Okta makes authentication secure, scalable, and production‑ready. By using Okta with React:

• You avoid writing complex auth logic
• You gain industry‑grade security
• You provide smooth SSO experience

Once you understand this basic flow, advanced topics like:

• Role‑based access
• Token validation
• API protection
• SSO across multiple apps

become much easier.

Next Steps

• Protect backend APIs using access tokens
• Implement refresh token rotation
• Add role‑based authorization
• Integrate Okta groups and claims

Happy Coding!