documentation/docs/enterprise-edition/okta/index.md
Okta is an enterprise-grade identity management service. Refine's integration of Okta's authentication services allows you to easily add Okta services to your application.
This package is included in Refine's Enterprise Edition. To learn more about Refine's Enterprise Edition, please contact us.
<InstallPackagesCommand args="@refinedev/okta @okta/okta-auth-js"># A registry with the auth token should be added for the @refinedev scope
@refinedev:registry=https://registry.refine.dev/
//registry.refine.dev/:_authToken=$NPM_TOKEN
First, you'll need to create an OktaAuth instance, then use the createAuthProvider method to create an auth provider. You can then pass the auth provider to the <Refine /> component.
The example below uses react-router for routing, but all router integrations of Refine will work the same way.
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}",
// A redirect uri is set to the current host + '/login/callback'
// We'll handle this route using the `<OktaCallback />` component.
// It will complete the auth process and handle the redirect.
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}
// We're passing the auth provider to the `<Refine />` component.
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>
);
};