Okta SDK swaps by framework

import { OktaAuth, toRelativeUrl } from "@okta/okta-auth-js";
import { LoginCallback, SecureRoute, Security, useOktaAuth } from "@okta/okta-react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Route, Switch, useHistory } from "react-router-dom";
import { issuer, clientId } from "./env.js";

const oktaAuth = new OktaAuth({
  issuer,
  clientId,
  redirectUri: `${location.origin}/login/callback`,
  scopes: ["openid", "profile", "email"],
});

function Profile() {
  const { authState, oktaAuth } = useOktaAuth();
  return (
    <>
      <p id="email">Email: {authState?.idToken?.claims.email}</p>
      <button onClick={() => oktaAuth.signOut()}>Sign out</button>
    </>
  );
}

function App() {
  const history = useHistory();
  const restoreOriginalUri = (_, originalUri) =>
    history.replace(toRelativeUrl(originalUri || "/", location.origin));
  return (
    <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
      <Switch>
        <Route path="/login/callback" component={LoginCallback} />
        <SecureRoute path="/profile" component={Profile} />
        <Route path="/">Home</Route>
      </Switch>
    </Security>
  );
}

createRoot(document.querySelector("#root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
);

import { OktaAuth, toRelativeUrl } from "@okta/okta-auth-js";
import { LoginCallback, SecureRoute, Security, useOktaAuth } from "@okta/okta-react";
import { useEffect, useState } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Route, Switch, useHistory } from "react-router-dom";
import { issuer, clientId } from "./env.js";

const oktaAuth = new OktaAuth({
  issuer,
  clientId,
  redirectUri: `${location.origin}/login/callback`,
  // offline_access asks for the refresh token that replaces the hidden iframe.
  scopes: ["openid", "profile", "email", "offline_access"],
});

function Profile() {
  const { oktaAuth } = useOktaAuth();
  // The ID token has no email or name: they come from UserInfo.
  const [user, setUser] = useState();
  useEffect(() => {
    oktaAuth.getUser().then(setUser);
  }, [oktaAuth]);
  return (
    <>
      <p id="email">Email: {user?.email}</p>
      <button onClick={() => oktaAuth.signOut()}>Sign out</button>
    </>
  );
}

function App() {
  const history = useHistory();
  const restoreOriginalUri = (_, originalUri) =>
    history.replace(toRelativeUrl(originalUri || "/", location.origin));
  return (
    <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
      <Switch>
        <Route path="/login/callback" component={LoginCallback} />
        <SecureRoute path="/profile" component={Profile} />
        <Route path="/">Home</Route>
      </Switch>
    </Security>
  );
}

createRoot(document.querySelector("#root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
);

ISSUER=https://{yourOktaDomain}/oauth2/default
CLIENT_ID=<Okta client ID>
CLIENT_SECRET=<Okta client secret>
APP_URL=http://localhost:3000

ISSUER=https://<your-org>.idra.team/api/auth
CLIENT_ID=<IdRa client ID>
CLIENT_SECRET=<IdRa client secret>
APP_URL=https://<your-host>

const { ExpressOIDC } = require("@okta/oidc-middleware");
const express = require("express");
const session = require("express-session");

const { ISSUER, CLIENT_ID, CLIENT_SECRET, APP_URL, SESSION_SECRET, PORT } = process.env;

const oidc = new ExpressOIDC({
  issuer: ISSUER,
  client_id: CLIENT_ID,
  client_secret: CLIENT_SECRET,
  appBaseUrl: APP_URL,
  scope: "openid profile email",
  // Only for an IdRa you run locally on http. Never needed for an https issuer.
  ...(ISSUER.startsWith("http:") && { testing: { disableHttpsCheck: true } }),
});

const app = express();
app.use(session({ secret: SESSION_SECRET, resave: false, saveUninitialized: false }));
app.use(oidc.router);

app.get("/", (req, res) => res.send("<h1>Home</h1>"));
app.get("/profile", oidc.ensureAuthenticated(), (req, res) => {
  res.send(`<p id="email">Email: ${req.userContext.userinfo.email}</p>
    <form method="post" action="/logout"><button>Sign out</button></form>`);
});

oidc.on("ready", () => app.listen(PORT, "127.0.0.1"));
oidc.on("error", (err) => console.error("oidc error:", err));

import OktaProvider from "next-auth/providers/okta";

export const authOptions = {
  providers: [
    OktaProvider({
      clientId: process.env.OKTA_CLIENT_ID,
      clientSecret: process.env.OKTA_CLIENT_SECRET,
      issuer: process.env.OKTA_ISSUER,
    }),
  ],
};

import OktaProvider from "next-auth/providers/okta";

export const authOptions = {
  providers: [
    OktaProvider({
      clientId: process.env.OKTA_CLIENT_ID,
      clientSecret: process.env.OKTA_CLIENT_SECRET,
      issuer: process.env.OKTA_ISSUER,
      name: "IdRa", // the label on the sign-in button
      // IdRa requires PKCE by default. The provider's default is state only.
      checks: ["pkce", "state"],
      // The ID token has no email or name: they come from UserInfo.
      async profile(claims, tokens) {
        const res = await fetch(`${process.env.OKTA_ISSUER}/oauth2/userinfo`, {
          headers: { authorization: `Bearer ${tokens.access_token}` },
        });
        if (!res.ok) throw new Error(`UserInfo: HTTP ${res.status}`);
        const { name, email } = await res.json();
        return { id: claims.sub, name, email, image: null };
      },
    }),
  ],
};

import asyncio
import json
import os

import requests
from flask import Flask, redirect, request, session, url_for
from okta_jwt_verifier import AccessTokenVerifier, IDTokenVerifier

with open("client_secrets.json") as f:
    config = json.load(f)

app = Flask(__name__)
app.secret_key = os.environ["SESSION_SECRET"]

APP_STATE = "ApplicationState"
NONCE = "SampleNonce"


def is_access_token_valid(token):
    verifier = AccessTokenVerifier(issuer=config["issuer"], audience="api://default")
    try:
        asyncio.run(verifier.verify(token))
        return True
    except Exception:
        return False


def is_id_token_valid(token):
    verifier = IDTokenVerifier(issuer=config["issuer"], client_id=config["client_id"], audience="api://default")
    try:
        asyncio.run(verifier.verify(token, nonce=NONCE))
        return True
    except Exception:
        return False


@app.route("/login")
def login():
    query = {
        "client_id": config["client_id"],
        "redirect_uri": config["redirect_uri"],
        "scope": "openid email profile",
        "state": APP_STATE,
        "nonce": NONCE,
        "response_type": "code",
        "response_mode": "query",
    }
    return redirect(f"{config['auth_uri']}?{requests.compat.urlencode(query)}")


@app.route("/authorization-code/callback")
def callback():
    code = request.args.get("code")
    if not code:
        return "The code was not returned or is not accessible", 403
    exchange = requests.post(
        config["token_uri"],
        data={"grant_type": "authorization_code", "code": code, "redirect_uri": request.base_url},
        auth=(config["client_id"], config["client_secret"]),
    ).json()
    if not exchange.get("token_type"):
        return "Unsupported token type. Should be 'Bearer'.", 403
    access_token = exchange["access_token"]
    if not is_access_token_valid(access_token):
        return "Access token is invalid", 403
    if not is_id_token_valid(exchange["id_token"]):
        return "ID token is invalid", 403
    userinfo = requests.get(config["userinfo_uri"], headers={"Authorization": f"Bearer {access_token}"}).json()
    session["user"] = {"name": userinfo["given_name"], "email": userinfo["email"]}
    return redirect(url_for("profile"))


@app.route("/")
def home():
    return "<h1>Home</h1>"


@app.route("/profile")
def profile():
    if "user" not in session:
        return redirect(url_for("login"))
    return f"""<p id="email">Email: {session['user']['email']}</p>
      <form method="post" action="/logout"><button>Sign out</button></form>"""


@app.route("/logout", methods=["POST"])
def logout():
    session.clear()
    return redirect(url_for("home"))

import asyncio
import base64
import hashlib
import json
import os
import secrets

import requests
from flask import Flask, abort, redirect, request, session, url_for
from okta_jwt_verifier import IDTokenVerifier

with open("client_secrets.json") as f:
    config = json.load(f)
# Endpoints come from discovery: IdRa's aren't under <issuer>/v1.
endpoints = requests.get(f"{config['issuer']}/.well-known/openid-configuration").json()

app = Flask(__name__)
app.secret_key = os.environ["SESSION_SECRET"]


def is_id_token_valid(token, nonce):
    verifier = IDTokenVerifier(issuer=config["issuer"], client_id=config["client_id"], audience="api://default")
    try:
        asyncio.run(verifier.verify(token, nonce=nonce))
        return True
    except Exception:
        return False


@app.route("/login")
def login():
    # IdRa requires PKCE by default. The sample's fixed state and nonce become per sign-in.
    verifier = secrets.token_urlsafe(32)
    challenge = base64.urlsafe_b64encode(hashlib.sha256(verifier.encode()).digest()).rstrip(b"=").decode()
    session["flow"] = {"verifier": verifier, "state": secrets.token_urlsafe(16), "nonce": secrets.token_urlsafe(16)}
    query = {
        "client_id": config["client_id"],
        "redirect_uri": config["redirect_uri"],
        "scope": "openid email profile",
        "state": session["flow"]["state"],
        "nonce": session["flow"]["nonce"],
        "response_type": "code",
        "code_challenge": challenge,
        "code_challenge_method": "S256",
    }
    return redirect(f"{endpoints['authorization_endpoint']}?{requests.compat.urlencode(query)}")


@app.route("/authorization-code/callback")
def callback():
    flow = session.pop("flow", None)
    if not flow or request.args.get("state") != flow["state"]:
        abort(403)
    code = request.args.get("code")
    if not code:
        return "The code was not returned or is not accessible", 403
    exchange = requests.post(
        endpoints["token_endpoint"],
        data={
            "grant_type": "authorization_code",
            "code": code,
            "redirect_uri": config["redirect_uri"],
            "code_verifier": flow["verifier"],
        },
        auth=(config["client_id"], config["client_secret"]),
    ).json()
    if not exchange.get("token_type"):
        return "Unsupported token type. Should be 'Bearer'.", 403
    # The access token is opaque here, so there's nothing to verify locally. UserInfo rejects a bad one.
    if not is_id_token_valid(exchange["id_token"], flow["nonce"]):
        return "ID token is invalid", 403
    userinfo = requests.get(
        endpoints["userinfo_endpoint"], headers={"Authorization": f"Bearer {exchange['access_token']}"}
    ).json()
    session["user"] = {"name": userinfo["given_name"], "email": userinfo["email"]}
    return redirect(url_for("profile"))


@app.route("/")
def home():
    return "<h1>Home</h1>"


@app.route("/profile")
def profile():
    if "user" not in session:
        return redirect(url_for("login"))
    return f"""<p id="email">Email: {session['user']['email']}</p>
      <form method="post" action="/logout"><button>Sign out</button></form>"""


@app.route("/logout", methods=["POST"])
def logout():
    session.clear()
    return redirect(url_for("home"))