@automators/auth

Installation

pnpm add @automators/auth

Usage

Sign In

"use client";

import { signIn } from "@automators/auth";

export default async function SignInButton() {
  return (
    <button
      onClick={() => {
        // will redirect to the auth subdomain
        signIn();
      }}
    >
      Sign In
    </button>
  );
}

Sign Out

"use client";

import { signOut } from "@automators/auth";

export default function SignOutButton() {
  return (
    <button
      onClick={() => {
        // Navigates to the auth service's /logout with a full page load, which
        // is the only reliable way to end the session: a background fetch's
        // Set-Cookie is dropped by Safari ITP and third-party cookie policies,
        // so the session survives and the app signs you straight back in.
        //
        // Do NOT follow this with window.location.reload(). The browser is
        // already leaving the page.
        signOut();
      }}
    >
      Sign Out
    </button>
  );
}

Pass callbackUrl to control where the user lands after signing in again. It defaults to the current page, and it takes a raw url which is encoded for you:

signOut({ callbackUrl: "https://app.example.com/dashboard?tab=usage" });

Get Logged In User

To get the logged in user client side:

"use client";

import { fetchUser } from "@automators/auth";
import { useQuery } from "@tanstack/react-query";

export function useUser() {
  return useQuery({
    queryKey: ["user"],
    queryFn: async () => {
      const res = await fetchUser();
      return res.json();
    },
  });
}

To get the logged in user server side:

// server side
import { getUser } from "@automators/auth";

export default async function Page() {
  const user = await getUser();
  return (
    <div>
      <h1>Welcome {user.name}</h1>
    </div>
  );
}

License

MIT