Version: 4.xx.xx
Okta Auth Provider
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.
Installation
This package is included in Refine's Enterprise Edition. To learn more about Refine's Enterprise Edition, please contact us.
- npm
- pnpm
- yarn
npm i @refinedev-ee/okta @okta/okta-auth-js
.npmrc
# A registry with the auth token should be added for the @refinedev-ee scope
@refinedev-ee:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=$NPM_TOKEN
pnpm add @refinedev-ee/okta @okta/okta-auth-js
.npmrc
# A registry with the auth token should be added for the @refinedev-ee scope
@refinedev-ee:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=$NPM_TOKEN
yarn add @refinedev-ee/okta @okta/okta-auth-js
.npmrc
# A registry with the auth token should be added for the @refinedev-ee scope
@refinedev-ee:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=$NPM_TOKEN
Usage
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-dom for routing, but all router integrations of Refine will work the same way.
App.tsx
import React from "react";
import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
import OktaAuth from "@okta/okta-auth-js";
import { Authenticated, AuthPage, Refine, WelcomePage } from "@refinedev/core";
import routerProvider, {
CatchAllNavigate,
NavigateToResource,
} from "@refinedev/react-router-v6";
import { createAuthProvider, OktaCallback } from "@refinedev-ee/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" }]}
/>
}
/>
{/* We're mounting `<OktaCallback />` at `/login/callback` route to complete our authentication process. */}
<Route
path="/login/callback"
element={<OktaCallback oktaAuth={oktaAuth} />}
/>
</Route>
</Routes>
</Refine>
</BrowserRouter>
);
};