seifeldeen92/react-okta-saml

Simple Okta SAML authentication with React client

Simple React and Express app SAML login by Okta

This is a very simple integration to demonstrate SSO via SAML Okta

Features

• Save user if authenticated
• Redirect user to Okta login if user not authenticated to access our app

Tech

This project uses:

• React - For the client side
• node.js - Evented I/O for the backend
• Express - node.js framework
• Passport - Authentication middleware for our API
• Passport SAML - This is a SAML 2.0 authentication provider for Passport

Installation

App requires Node.js v10+ to run.

Install Server

Install the dependencies and devDependencies and start the server on port 5000.

cd server
yarn install
yarn dev

in another terminal window

cd server
yarn watch

Install Client

Install the dependencies and devDependencies and start the client on port 3000.

cd client
yarn install
yarn start

Setup Okta App

Go to Okta developer and signup or signin. After you signin, you need to create an application from the left sidebar.

How to Configure SAML 2.0 for your Application

Single sign on URL: http://localhost:5000/login/callback
Audience URI (SP Entity ID): http://localhost:5000
Name ID format: EmailAddress
Application username: Okta username

After you finish this step, you will need to copy Identity Provider Single Sign-On URL and X.509 Certificate found after you click on View Setup Instructions.Afterwards, add your copied Identity Provider Single Sign-On URL to the entryPoint property in config.ts under saml property, then add your application's X.509 Certificate in saml.pem.

Reference

• Okta developer docs
• React SAML Authentication by @joeythelantern 🙏 Thank You

Congratulation! you are done! 🥳

react-okta-saml's Issues

Couldnt Compile with Node 17.4.0

node:internal/modules/cjs/loader:488
throw e;
^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /Users/chinna/Downloads/React-Okta-SAML-master/client/node_modules/postcss-safe-parser/node_modules/postcss/package.json
at new NodeError (node:internal/errors:371:5)
at throwExportsNotFound (node:internal/modules/esm/resolve:429:9)
at packageExportsResolve (node:internal/modules/esm/resolve:703:3)
at resolveExports (node:internal/modules/cjs/loader:482:36)
at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:999:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (/Users/chinna/Downloads/React-Okta-SAML-master/client/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}