It eliminates repetitive tasks in CRUD operations and provides industry-standard solutions for critical project components like authentication, access control, routing, networking, state management, and i18n.

Auth provider integration for Okta with refine

refine is headless by design, offering unlimited styling and customization options. Moreover, refine ships with ready-made integrations for Ant Design, Material UI, Mantine, and Chakra UI for convenience.

refine has connectors for 15+ backend services, including REST API, GraphQL, and popular services like Airtable, Strapi, Supabase, Firebase, and NestJS.

Installation & Usage

With react-router

npm install @refinedev/okta @okta/okta-auth-js

import React from "react";
import { BrowserRouter, Outlet, Route, Routes } from "react-router";

import OktaAuth from "@okta/okta-auth-js";

import { Authenticated, AuthPage, Refine, WelcomePage } from "@refinedev/core";
import routerProvider, {
  CatchAllNavigate,
  NavigateToResource,
} from "@refinedev/react-router";
import { createAuthProvider, OktaCallback } from "@refinedev/okta";

const oktaAuth = new OktaAuth({
  issuer: "https://{yourOktaDomain}/oauth2/default",
  clientId: "{clientId}",
  redirectUri: window.location.origin + "/login/callback",
  scopes: ["openid", "email", "profile", "offline_access"],
  pkce: true,
  devMode: true,
});

const authProvider = createAuthProvider(oktaAuth);

export const App = () => {
  return (
    <BrowserRouter>
      <Refine routerProvider={routerProvider} authProvider={authProvider}>
        <Routes>
          <Route
            element={
              <Authenticated
                key="authenticated-inner"
                fallback={<CatchAllNavigate to="/login" />}
              >
                <Outlet />
              </Authenticated>
            }
          >
            <Route index element={<WelcomePage />} />
          </Route>
          <Route
            element={
              <Authenticated key="authenticated-outer" fallback={<Outlet />}>
                <NavigateToResource />
              </Authenticated>
            }
          >
            <Route
              path="/login"
              element={
                <AuthPage
                  type="login"
                  hideForm
                  providers={[{ name: "Okta" }]}
                />
              }
            />
            <Route
              path="/login/callback"
              element={<OktaCallback oktaAuth={oktaAuth} />}
            />
          </Route>
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

Documentation