JSPM

remix-auth-okta

1.2.0
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 4951
    • Score
      100M100P100Q183172F
    • License MIT

    Package Exports

    • remix-auth-okta
    • remix-auth-okta/build/index.js

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (remix-auth-okta) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    CI npm

    OktaStrategy

    The Okta strategy is used to authenticate users against an okta account. It extends the OAuth2Strategy.

    Supported runtimes

    Runtime Has Support
    Node.js ✅
    Cloudflare ✅

    Prerequisites

    Create an Okta Web app

    Follow the steps on the Okta documentation to create Okta web app and get client ID, client secret and issuer

    How to use

    Create the strategy instance

    // app/utils/auth.server.ts
import { Authenticator } from "remix-auth";
import { OktaStrategy } from "remix-auth-okta";

// Create an instance of the authenticator, pass a generic with what your
// strategies will return and will be stored in the session
export const authenticator = new Authenticator<User>(sessionStorage);

let oktaStrategy = new OktaStrategy(
  {
    // example of issuer: https://dev-1234.okta.com/oauth2/default
    issuer: "YOUR_OKTA_ISSUER", 
    clientID: "YOUR_OKTA_CLIENT_ID",
    clientSecret: "YOUR_OKTA_CLIENT_SECRET",
    callbackURL: "https://your-app-domain.com/auth/okta/callback",
  },
  async ({ accessToken, refreshToken, extraParams, profile }) => {
    // Get the user data from your DB or API using the tokens and profile
    return User.findOrCreate({ email: profile.email });
  }
);

authenticator.use(oktaStrategy);

    Setup your routes

    // app/routes/login.tsx
export default function Login() {
  return (
    <Form action="/auth/okta" method="post">
      <button>Login with Okta</button>
    </Form>
  );
}
    // app/routes/auth/okta.tsx
import type { ActionFunction, LoaderFunction } from "remix";

import { authenticator } from "~/utils/auth.server";

export let loader: LoaderFunction = () => redirect("/login");

export let action: ActionFunction = ({ request }) => {
  return authenticator.authenticate("okta", request);
};

    // app/routes/auth/okta/callback.tsx
import type { ActionFunction, LoaderFunction } from "remix";

import { authenticator } from "~/utils/auth.server";

export let loader: LoaderFunction = ({ request }) => {
  return authenticator.authenticate("okta", request, {
    successRedirect: "/private",
    failureRedirect: "/login",
  });
};

    How to use with custom login page

    Create the strategy instance

    // app/utils/auth.server.ts
import { Authenticator } from "remix-auth";
import { OktaStrategy } from "remix-auth-okta";

// Create an instance of the authenticator, pass a generic with what your
// strategies will return and will be stored in the session
export const authenticator = new Authenticator<User>(sessionStorage);

let oktaStrategy = new OktaStrategy(
  {
    // example of issuer: https://dev-1234.okta.com/oauth2/default
    issuer: "YOUR_OKTA_ISSUER", 
    clientID: "YOUR_OKTA_CLIENT_ID",
    clientSecret: "YOUR_OKTA_CLIENT_SECRET",
    callbackURL: "https://your-app-domain.com/auth/okta/callback",

    // Add this to options for custom login form
    withCustomLoginForm: true,
    // example of okta domain: https://dev-1234.okta.com
    oktaDomain: "YOUR_OKTA_DOMAIN"
  },
  async ({ accessToken, refreshToken, extraParams, profile }) => {
    // Get the user data from your DB or API using the tokens and profile
    return User.findOrCreate({ email: profile.email });
  }
);

authenticator.use(oktaStrategy);

    Setup your routes

    // app/routes/login.tsx
export default function Login() {
  return (
    <Form action="/auth/okta" method="post">
      <input type="text" name="email"/>
      <input type="password" name="password"/>
      <button>Log in</button>
    </Form>
  );
}
    // app/routes/auth/okta.tsx
import type { ActionFunction, LoaderFunction } from "remix";

import { authenticator } from "~/utils/auth.server";

export let loader: LoaderFunction = () => redirect("/login");

export let action: ActionFunction = ({ request }) => {
  return authenticator.authenticate("okta", request);
};

    // app/routes/auth/okta/callback.tsx
import type { ActionFunction, LoaderFunction } from "remix";

import { authenticator } from "~/utils/auth.server";

export let loader: LoaderFunction = ({ request }) => {
  return authenticator.authenticate("okta", request, {
    successRedirect: "/private",
    failureRedirect: "/login",
  });
};