Big news!Introducing Socket AI - ChatGPT-Powered Threat Analysis. Learn more
Socket
Log inDemoInstall

remix-auth-okta

Package Overview
Dependencies
1
Maintainers
1
Versions
3
Issues
File Explorer

Advanced tools

remix-auth-okta

![CI](https://img.shields.io/github/actions/workflow/status/jrakotoharisoa/remix-auth-okta/main.yml?branch=main&style=flat-square) ![npm](https://img.shields.io/npm/v/remix-auth-okta?style=flat-square) # OktaStrategy

    1.2.0latest
    npm

Version published
Maintainers
1
Weekly downloads
638
decreased by-42.88%

Weekly downloads

Readme

Source

CI npm

OktaStrategy

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

Supported runtimes

RuntimeHas 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", }); };

Keywords

FAQs

Last updated on 11 Jan 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc