Next.js — first integration - Authaz

Next.js — first integration - Authaz - Docs

AUTHAZ_CLIENT_ID=app_01h...
AUTHAZ_CLIENT_SECRET=secret_...
AUTHAZ_ORGANIZATION_ID=0199...
AUTHAZ_API_KEY=mgmt_01h...

import { createAuthazHandler } from "@authaz/next";
 
export const { GET, POST } = createAuthazHandler({
  clientId: process.env.AUTHAZ_CLIENT_ID!,
  clientSecret: process.env.AUTHAZ_CLIENT_SECRET!,
  organizationId: process.env.AUTHAZ_ORGANIZATION_ID!,
  afterLoginUrl: "/dashboard",
  afterLogoutUrl: "/",
});

"use client";
import { useEffect } from "react";
import { useSearchParams } from "next/navigation";
 
export default function Callback() {
  const params = useSearchParams();
  useEffect(() => {
    const form = document.createElement("form");
    form.method = "POST";
    form.action = "/api/auth/callback";
    for (const k of ["code", "state", "error", "error_description"]) {
      const v = params.get(k);
      if (v) {
        const i = document.createElement("input");
        i.type = "hidden"; i.name = k; i.value = v;
        form.appendChild(i);
      }
    }
    document.body.appendChild(form);
    form.submit();
  }, [params]);
  return <p>Completing sign-in…</p>;
}

import { createAuthMiddleware } from "@authaz/next";
 
export default createAuthMiddleware({
  publicPaths: ["/", "/api/auth/*", "/auth/callback"],
  loginPath: "/api/auth/login",
});
 
export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
};

import { requireUser } from "@authaz/next";
 
const user = requireUser({
  organizationId: process.env.AUTHAZ_ORGANIZATION_ID!,
  apiKey: process.env.AUTHAZ_API_KEY!,
});
 
export default async function Dashboard() {
  const me = await user.getOrRedirect();
  return (
    <main>
      <h1>Hello, {me.email}</h1>
      <p>Your Authaz user id: <code>{me.id}</code></p>
      <form action="/api/auth/logout" method="POST">
        <button type="submit">Sign out</button>
      </form>
    </main>
  );
}

Next.js — first integration

1. What you'll build#

2. Application setup#

3. Install#

4. Configure#

5. Wire it up#

6. Read the user#

8. Common gotchas#

9. Next steps#

1. What you'll build#

2. Application setup#

3. Install#

4. Configure#

5. Wire it up#

6. Read the user#

7. Login button#

8. Common gotchas#

9. Next steps#