Move an app that uses Okta's SDKs

import { OktaAuth } from "@okta/okta-auth-js";
import { issuer, clientId } from "./env.js";

const oktaAuth = new OktaAuth({
  issuer,
  clientId,
  redirectUri: `${location.origin}/login/callback`,
  scopes: ["openid", "profile", "email"],
});
const status = document.querySelector("#status");
const report = (e) => (status.textContent = `${e.name}: ${e.message}`);

// The app's own sign-in form.
document.querySelector("#login").addEventListener("submit", async (e) => {
  e.preventDefault();
  const { username, password } = Object.fromEntries(new FormData(e.target));
  try {
    const tx = await oktaAuth.signInWithCredentials({ username, password });
    await oktaAuth.token.getWithRedirect({ sessionToken: tx.sessionToken });
  } catch (err) {
    report(err);
  }
});

// Silent renew from the session cookie, in a hidden iframe.
document.querySelector("#renew").addEventListener("click", async () => {
  try {
    const { tokens } = await oktaAuth.token.getWithoutPrompt();
    oktaAuth.tokenManager.setTokens(tokens);
    status.textContent = "renewed";
  } catch (err) {
    report(err);
  }
});

// Is the person signed in?
document.querySelector("#check").addEventListener("click", async () => {
  status.textContent = `session.exists: ${await oktaAuth.session.exists()}`;
});

import { OktaAuth } from "@okta/okta-auth-js";
import { issuer, clientId } from "./env.js";

const oktaAuth = new OktaAuth({
  issuer,
  clientId,
  redirectUri: `${location.origin}/login/callback`,
  postLogoutRedirectUri: `${location.origin}/after`,
  // offline_access asks for the refresh token that replaces the hidden iframe.
  scopes: ["openid", "profile", "email", "offline_access"],
  restoreOriginalUri: (_, originalUri) => location.replace(originalUri ?? "/after"),
});
const status = document.querySelector("#status");

// The login page belongs to the identity provider now: the form becomes a button.
document.querySelector("#signin").addEventListener("click", () => {
  oktaAuth.signInWithRedirect({ originalUri: location.pathname });
});

// Runs on the redirect URI: exchanges the code, then calls restoreOriginalUri.
if (oktaAuth.isLoginRedirect()) await oktaAuth.handleLoginRedirect();

// Keeps tokens fresh: when one expires, the SDK uses the refresh token.
await oktaAuth.start();

// Renew on demand. Also uses the refresh token.
document.querySelector("#renew").addEventListener("click", async () => {
  await oktaAuth.tokenManager.renew("accessToken");
  status.textContent = "renewed";
});

// Is the person signed in to this app? Answered from its own tokens.
if (await oktaAuth.isAuthenticated()) {
  const { email } = await oktaAuth.token.getUserInfo();
  status.textContent = `signed in: ${email}`;
} else {
  status.textContent = "signed out";
}

document.querySelector("#signout").addEventListener("click", () => {
  oktaAuth.signOut();
});

import { OktaAuth } from "@okta/okta-auth-js";
import { issuer, clientId, apiIdentifier, apiScope } from "./env.js";

const oktaAuth = new OktaAuth({
  issuer,
  clientId,
  redirectUri: `${location.origin}/api-app/callback`,
  postLogoutRedirectUri: `${location.origin}/after`,
  scopes: ["openid", apiScope, "offline_access"],
  restoreOriginalUri: (_, originalUri) => location.replace(originalUri ?? "/api-app"),
});

document.querySelector("#signin").addEventListener("click", () => {
  oktaAuth.signInWithRedirect({
    originalUri: location.pathname,
    // Without a resource the access token is opaque. With one it's a JWT, whose audience is the identifier.
    extraParams: { resource: apiIdentifier },
  });
});
if (oktaAuth.isLoginRedirect()) await oktaAuth.handleLoginRedirect();

document.querySelector("#renew").addEventListener("click", async () => {
  await oktaAuth.tokenManager.renew("accessToken");
  document.querySelector("#status").textContent = "renewed";
});

// A JWT access token can't be revoked: it stays valid until it expires. Keep its lifetime short.
document.querySelector("#signout").addEventListener("click", () => {
  oktaAuth.signOut();
});

import OktaJwtVerifier from "@okta/jwt-verifier";

/** On your API's server. `http` issuers are refused, so a local run passes `testing`; leave it out in production. */
export function verifier(issuer, testing) {
  const jwt = new OktaJwtVerifier({ issuer, ...(testing && { testing }) });
  return (accessToken, audience) => jwt.verifyAccessToken(accessToken, audience);
}

const verify = verifier("https://<your-org>.idra.team/api/auth");
const { claims } = await verify(accessToken, "https://api.example.com");