@snokam/auth 2.2.22 → 2.3.0

package/src/components/Authenticate.tsx

@@ -0,0 +1,38 @@
+import { memo, useEffect } from "react";
+import { Auth } from "../utils/types";
+import { signIn } from "next-auth/react";
+import { useAuth } from "../hooks";
+import { PageLoader } from "@snokam/ui";
+import { useOptionalConfig } from "@snokam/config";
+
+export const Authenticate = memo((props: Auth.Authenticate.Props) => {
+  const { children, provider } = props;
+  const { inProgress, isAuthenticated } = useAuth();
+  const config = useOptionalConfig();
+  const central = config?.NEXT_PUBLIC_CENTRAL_AUTH_URL;
+
+  useEffect(() => {
+    if (inProgress || isAuthenticated) {
+      return;
+    }
+
+    const onLocalhost = window.location.hostname === "localhost";
+    const onCentral =
+      onLocalhost || (central && central.startsWith(window.location.origin));
+    if (central && !onCentral) {
+      const returnTo = window.location.href;
+      window.location.href = `${central}/handoff/start?returnTo=${encodeURIComponent(
+        returnTo
+      )}`;
+      return;
+    }
+
+    signIn(provider);
+  }, [inProgress, isAuthenticated, provider, central]);
+
+  if (!isAuthenticated) {
+    return <PageLoader />;
+  }
+
+  return children;
+});

package/src/components/Authenticated.tsx

@@ -0,0 +1,11 @@
+import { useSession } from "next-auth/react";
+import { ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+export const Authenticated = ({ children }: Props) => {
+  const { status } = useSession();
+  return status === "authenticated" ? children : null;
+};

package/src/components/Consent/index.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import Button from "@mui/material/Button";
+import { useOptionalConfig } from "@snokam/config";
+import { Error } from "../Error";
+
+export const Consent = () => {
+  const config = useOptionalConfig();
+  const manageUrl = `${config?.NEXT_PUBLIC_PLATFORM_BASE_URL ?? ""}/manage`;
+
+  return (
+    <Error
+      heading="Tilgang må godkjennes"
+      message={
+        <>
+          Organisasjonen din har ikke tatt i bruk Snøkam ennå.
+          <br />
+          Administrer tilgangen for bedriften din.
+        </>
+      }
+      action={
+        <Button
+          sx={{ mt: 3 }}
+          color="primary"
+          variant="contained"
+          href={manageUrl}
+        >
+          Gå til administrasjon
+        </Button>
+      }
+    />
+  );
+};
+
+export default Consent;

package/src/components/EmployeeGate/index.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { ReactNode, useEffect } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { PageLoader } from "@snokam/ui";
+import { useAuth } from "../../hooks";
+import { NotProvisioned } from "../NotProvisioned";
+import { InactiveEmployee } from "../InactiveEmployee";
+
+interface Props {
+  employee: unknown;
+  isLoading: boolean;
+  allowAnonymous?: boolean;
+  children: ReactNode;
+}
+
+export const EmployeeGate = ({
+  employee,
+  isLoading,
+  allowAnonymous = false,
+  children,
+}: Props) => {
+  const { isAuthenticated, inProgress } = useAuth();
+  const router = useRouter();
+  const pathname = usePathname();
+  const anonymous = !inProgress && !isAuthenticated;
+  const isAuthRoute = pathname?.startsWith("/auth") ?? false;
+
+  useEffect(() => {
+    if (!allowAnonymous && anonymous && !isAuthRoute) {
+      const fullPath = `${window.location.pathname}${window.location.search}`;
+      router.push(`/auth/login?callbackUrl=${encodeURIComponent(fullPath)}`);
+    }
+  }, [allowAnonymous, anonymous, isAuthRoute, pathname, router]);
+
+  if (isAuthRoute) {
+    return <>{children}</>;
+  }
+
+  if (inProgress || (isAuthenticated && isLoading)) {
+    return <PageLoader />;
+  }
+
+  if (isAuthenticated && !employee) {
+    return <NotProvisioned />;
+  }
+
+  if (isAuthenticated && (employee as { active?: boolean }).active === false) {
+    return <InactiveEmployee />;
+  }
+
+  if (anonymous && !allowAnonymous) {
+    return <PageLoader />;
+  }
+
+  return <>{children}</>;
+};
+
+export default EmployeeGate;

package/src/components/Error/index.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { ReactNode } from "react";
+import Styled from "./styled";
+import { Layout } from "@snokam/ui";
+import { TransitionType } from "@snokam/ui/layout";
+import { useAuth } from "../../hooks";
+import { useOptionalConfig } from "@snokam/config";
+import Button from "@mui/material/Button";
+import { Avatar, Alert } from "@mui/material";
+
+export interface ErrorPageProps {
+  message?: ReactNode;
+  heading?: string;
+  action?: ReactNode;
+  hideRetryButton?: boolean;
+}
+
+export const Error = ({
+  message,
+  heading,
+  action,
+  hideRetryButton,
+}: ErrorPageProps) => {
+  const { session, signOut } = useAuth();
+
+  const config = useOptionalConfig();
+  const isProd = config?.NEXT_PUBLIC_ENVIRONMENT === "p";
+
+  return (
+    <Styled.Container
+      transitions={{
+        bottom: {
+          type: TransitionType.Wave,
+        },
+      }}
+    >
+      <Layout.Content>
+        <Styled.Section>
+          <Styled.Wrapper>
+            <Styled.Heading>{heading ?? "Oops! Noe gikk galt."}</Styled.Heading>
+            <Styled.Illustration
+              src="https://ressurser.snokam.no/figures/snowman.svg"
+              alt="Feil illustrasjon"
+            />
+            <Styled.Description>
+              {message ?? (
+                <>
+                  En uventet feil har oppstått.
+                  <br />
+                  Prøv igjen, eller logg inn på nytt.
+                </>
+              )}
+            </Styled.Description>
+            {session && session.user && (
+              <Styled.User>
+                <Avatar src={session.user.image ?? undefined} />
+                Logget inn som: {session.user.name}
+                <br />({session.user.email})
+              </Styled.User>
+            )}
+            {!isProd && (
+              <Alert severity="warning">
+                Du er i test! Husk at det kun er mulig å logge inn <br />
+                med en av våre testbrukere som du finner i 1Password.
+              </Alert>
+            )}
+            {action}
+            {!hideRetryButton && (
+              <Button
+                sx={{ mt: 3 }}
+                color="secondary"
+                variant={action ? "outlined" : "contained"}
+                onClick={() => {
+                  signOut({
+                    callbackUrl: "/auth/login?callbackUrl=/&prompt=login",
+                  });
+                }}
+              >
+                Logg inn på nytt
+              </Button>
+            )}
+          </Styled.Wrapper>
+        </Styled.Section>
+      </Layout.Content>
+    </Styled.Container>
+  );
+};
+
+export default Error;

package/src/components/Error/styled.tsx

@@ -0,0 +1,63 @@
+import styled from "@emotion/styled";
+import Layout from "@snokam/ui/layout";
+
+const Container = styled(Layout.Container)`
+  flex: 1;
+  justify-content: center;
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  align-items: center;
+  width: 100%;
+  max-width: 600px;
+  padding: 2rem;
+  background-color: var(--color-dark-green);
+  border-radius: 1rem;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.9);
+`;
+
+const Heading = styled.h1`
+  font-size: 2rem;
+  font-weight: 600;
+  margin: 0;
+`;
+
+const Illustration = styled.img`
+  width: 200px;
+  max-width: 100%;
+  height: auto;
+`;
+
+const Section = styled(Layout.Section)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--color-light-blue);
+`;
+
+const Description = styled.div`
+  display: flex;
+  font-size: 1.15rem;
+  text-align: center;
+`;
+
+const User = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 1rem;
+  margin-top: 1rem;
+  gap: 1rem;
+`;
+
+export default {
+  Container,
+  Wrapper,
+  Heading,
+  Illustration,
+  Description,
+  Section,
+  User,
+};

package/src/components/InactiveEmployee/index.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { Error } from "../Error";
+
+export const InactiveEmployee = () => (
+  <Error
+    heading="Venter på tilgang"
+    message={
+      <>
+        Brukeren din er registrert, men er ikke aktivert ennå.
+        <br />
+        Ta kontakt med administratoren din for å få tilgang.
+      </>
+    }
+  />
+);
+
+export default InactiveEmployee;

package/src/components/LoggedOut/index.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import Button from "@mui/material/Button";
+import Error from "../Error";
+
+interface Props {
+  onLogin: () => void;
+}
+
+export const LoggedOut = ({ onLogin }: Props) => (
+  <Error
+    heading="Du er logget ut"
+    message="Velkommen tilbake når det passer deg."
+    hideRetryButton
+    action={
+      <Button color="secondary" variant="contained" onClick={onLogin}>
+        Logg inn
+      </Button>
+    }
+  />
+);
+
+export default LoggedOut;

package/src/components/NotProvisioned/index.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { Error } from "../Error";
+
+export const NotProvisioned = () => (
+  <Error
+    heading="Mangler tilgang"
+    message={
+      <>
+        Du er logget inn, men brukeren din er ikke registrert som ansatt her
+        ennå.
+        <br />
+        Ta kontakt med administratoren din dersom dette ikke stemmer.
+      </>
+    }
+  />
+);
+
+export default NotProvisioned;

package/src/components/Unauthenticated.tsx

@@ -0,0 +1,11 @@
+import { useSession } from "next-auth/react";
+import { ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+export const Unauthenticated = ({ children }: Props) => {
+  const { status } = useSession();
+  return status === "unauthenticated" ? children : null;
+};

package/src/config.ts

@@ -0,0 +1,9 @@
+import type { Auth } from "./utils/types";
+
+export const getAuthConfig = (): Auth.Config => ({
+  clientId: process.env.NEXT_PUBLIC_AZURE_AD_CLIENT_ID ?? "",
+  tenantId: process.env.NEXT_PUBLIC_AZURE_AD_TENANT_ID ?? "",
+  clientSecret: process.env.AZURE_AD_SECRET ?? "",
+  nextAuthSecret: process.env.NEXTAUTH_SECRET ?? "",
+  environment: process.env.NEXT_PUBLIC_ENVIRONMENT,
+});

package/src/handoff/handlers.ts

@@ -0,0 +1,146 @@
+import { getToken } from "next-auth/jwt";
+import { getSessionCookieSettings } from "../utils/cookies";
+import { getAuthUrl, requestOrigin } from "../utils/url";
+import { sealHandoff } from "./ticket";
+import { isAllowedReturnTo } from "./return-to";
+import { safeCallbackTarget } from "../utils/callback-url";
+import { revokePasswordToken } from "../password/api";
+
+interface HandoffConfig {
+  nextAuthSecret: string;
+}
+
+async function validReturnTo(request: Request): Promise<string | null> {
+  const returnTo = new URL(request.url).searchParams.get("returnTo");
+  if (!returnTo) return null;
+  const allowed = await isAllowedReturnTo(returnTo, {
+    platformApiBase: process.env.NEXT_PUBLIC_PLATFORM_API_BASE_URL ?? "",
+    platformBaseDomain: process.env.NEXT_PUBLIC_PLATFORM_DOMAIN ?? "",
+    allowLocalhost: process.env.AUTH_ALLOW_LOCALHOST === "true",
+  });
+  return allowed ? returnTo : null;
+}
+
+async function centralToken(request: Request, secret: string) {
+  const { name: cookieName } = getSessionCookieSettings(getAuthUrl());
+  return getToken({ req: request as never, secret, cookieName });
+}
+
+interface HandoffToken {
+  oid?: unknown;
+  tid?: unknown;
+  email?: unknown;
+  name?: unknown;
+  refreshToken?: unknown;
+  authMethod?: unknown;
+  picture?: unknown;
+}
+
+function portableImage(picture: unknown): string | undefined {
+  return typeof picture === "string" && picture.startsWith("https://")
+    ? picture
+    : undefined;
+}
+
+function completeRedirect(
+  token: HandoffToken,
+  returnTo: string,
+  secret: string
+): Response {
+  const business = new URL(returnTo);
+  const image = portableImage(token.picture);
+  const ticket = sealHandoff(
+    {
+      oid: String(token.oid ?? ""),
+      email: String(token.email ?? ""),
+      name: String(token.name ?? ""),
+      tid: String(token.tid ?? ""),
+      business: business.hostname,
+      refreshToken: String(token.refreshToken ?? ""),
+      ...(token.authMethod ? { authMethod: String(token.authMethod) } : {}),
+      ...(image ? { image } : {}),
+    },
+    secret
+  );
+
+  const complete = new URL("/auth/complete", business.origin);
+  complete.searchParams.set("ticket", ticket);
+  complete.searchParams.set(
+    "callbackUrl",
+    safeCallbackTarget(business.pathname + business.search, business.origin)
+  );
+  return Response.redirect(complete.toString(), 302);
+}
+
+function expireCookie(name: string, domain?: string, secure?: boolean): string {
+  return [
+    `${name}=`,
+    "Path=/",
+    "Max-Age=0",
+    "HttpOnly",
+    "SameSite=Lax",
+    domain ? `Domain=${domain}` : "",
+    secure ? "Secure" : "",
+  ]
+    .filter(Boolean)
+    .join("; ");
+}
+
+export function createHandoffLogoutHandler(config?: HandoffConfig) {
+  return async function GET(request: Request) {
+    const returnTo = (await validReturnTo(request)) ?? requestOrigin(request);
+    const { name, domain, secure } = getSessionCookieSettings(getAuthUrl());
+
+    if (config?.nextAuthSecret) {
+      const token = await centralToken(request, config.nextAuthSecret);
+      if (token?.authMethod === "password" && token.refreshToken) {
+        await revokePasswordToken(String(token.refreshToken));
+      }
+    }
+
+    const headers = new Headers({ Location: returnTo });
+    for (const cookieName of [name, `${name}.0`, `${name}.1`]) {
+      headers.append("Set-Cookie", expireCookie(cookieName, domain, secure));
+    }
+    return new Response(null, { status: 302, headers });
+  };
+}
+
+export function createHandoffStartHandler(config: HandoffConfig) {
+  return async function GET(request: Request) {
+    const returnTo = await validReturnTo(request);
+    if (!returnTo) {
+      return new Response("Invalid returnTo", { status: 400 });
+    }
+
+    const prompt = new URL(request.url).searchParams.get("prompt");
+    const token = await centralToken(request, config.nextAuthSecret);
+    if (token?.refreshToken && !prompt) {
+      return completeRedirect(token, returnTo, config.nextAuthSecret);
+    }
+
+    const origin = requestOrigin(request);
+    const finish = `${origin}/handoff/finish?returnTo=${encodeURIComponent(returnTo)}`;
+    const promptParam = prompt ? `&prompt=${encodeURIComponent(prompt)}` : "";
+    const login = `${origin}/auth/login?callbackUrl=${encodeURIComponent(finish)}${promptParam}`;
+    return Response.redirect(login, 302);
+  };
+}
+
+export function createHandoffFinishHandler(config: HandoffConfig) {
+  return async function GET(request: Request) {
+    const returnTo = await validReturnTo(request);
+    if (!returnTo) {
+      return new Response("Invalid returnTo", { status: 400 });
+    }
+
+    const token = await centralToken(request, config.nextAuthSecret);
+    if (!token?.refreshToken) {
+      const origin = requestOrigin(request);
+      const start = `${origin}/handoff/start?returnTo=${encodeURIComponent(returnTo)}`;
+      return Response.redirect(start, 302);
+    }
+
+    return completeRedirect(token, returnTo, config.nextAuthSecret);
+  };
+}

package/src/handoff/return-to.ts

@@ -0,0 +1,40 @@
+import { isKnownTenantHost } from "@snokam/config";
+import { getManagedBearer } from "@snokam/identity";
+
+interface ReturnToOptions {
+  platformApiBase: string;
+  platformBaseDomain: string;
+  allowLocalhost?: boolean;
+}
+
+export async function isAllowedReturnTo(
+  returnTo: string,
+  opts: ReturnToOptions
+): Promise<boolean> {
+  let url: URL;
+  try {
+    url = new URL(returnTo);
+  } catch {
+    return false;
+  }
+
+  const host = url.hostname.toLowerCase();
+  if (host === "localhost" || host === "127.0.0.1") {
+    return !!opts.allowLocalhost && url.protocol === "http:";
+  }
+
+  if (url.protocol !== "https:") {
+    return false;
+  }
+
+  const base = opts.platformBaseDomain.toLowerCase().replace(/^\./, "");
+  if (base && (host === base || host.endsWith(`.${base}`))) {
+    return true;
+  }
+
+  return isKnownTenantHost({
+    host,
+    platformApiBase: opts.platformApiBase,
+    authToken: await getManagedBearer(),
+  });
+}

package/src/handoff/ticket.ts

@@ -0,0 +1,97 @@
+import {
+  createCipheriv,
+  createDecipheriv,
+  createHash,
+  randomBytes,
+} from "crypto";
+
+export interface HandoffClaims {
+  oid: string;
+  email: string;
+  name: string;
+  tid: string;
+  business: string;
+  refreshToken: string;
+  authMethod?: string;
+  image?: string;
+}
+
+const ALGORITHM = "aes-256-gcm";
+const DEFAULT_TTL_SECONDS = 300;
+
+function rejectHandoff(reason: string): null {
+  console.warn(`[handoff] ticket rejected: ${reason}`);
+  return null;
+}
+
+const keyFromSecret = (secret: string): Buffer => {
+  if (!secret)
+    throw new Error(
+      "Hand-off secret (NEXTAUTH_SECRET) is empty; refusing to seal/open a forgeable ticket."
+    );
+  return createHash("sha256").update(secret).digest();
+};
+
+export function sealHandoff(
+  claims: HandoffClaims,
+  secret: string,
+  ttlSeconds: number = DEFAULT_TTL_SECONDS
+): string {
+  const payload = JSON.stringify({
+    ...claims,
+    exp: Math.floor(Date.now() / 1000) + ttlSeconds,
+  });
+  const iv = randomBytes(12);
+  const cipher = createCipheriv(ALGORITHM, keyFromSecret(secret), iv);
+  const ciphertext = Buffer.concat([
+    cipher.update(payload, "utf8"),
+    cipher.final(),
+  ]);
+  return [iv, cipher.getAuthTag(), ciphertext]
+    .map((part) => part.toString("base64url"))
+    .join(".");
+}
+
+export function openHandoff(
+  ticket: string,
+  secret: string,
+  expectedBusiness?: string,
+  now: number = Date.now()
+): HandoffClaims | null {
+  const parts = ticket.split(".");
+  if (parts.length !== 3) {
+    return rejectHandoff("malformed ticket (expected iv.tag.ciphertext)");
+  }
+
+  try {
+    const [iv, tag, ciphertext] = parts.map((part) =>
+      Buffer.from(part, "base64url")
+    );
+    const decipher = createDecipheriv(ALGORITHM, keyFromSecret(secret), iv);
+    decipher.setAuthTag(tag);
+    const plaintext = Buffer.concat([
+      decipher.update(ciphertext),
+      decipher.final(),
+    ]).toString("utf8");
+
+    const payload = JSON.parse(plaintext) as HandoffClaims & { exp: number };
+    if (payload.exp * 1000 < now) {
+      return rejectHandoff(
+        `expired (exp ${payload.exp}, now ${Math.floor(now / 1000)})`
+      );
+    }
+
+    if (expectedBusiness && payload.business !== expectedBusiness) {
+      return rejectHandoff(
+        `business mismatch (ticket "${payload.business}" vs host "${expectedBusiness}")`
+      );
+    }
+
+    const { exp: _exp, ...claims } = payload;
+    return claims;
+  } catch (error) {
+    return rejectHandoff(
+      `decrypt failed (secret mismatch or tampered): ${(error as Error).message}`
+    );
+  }
+}