Basic Usage

Vuer Auth provides built-in authentication support for:

OIDC/OAuth2 authentication with PKCE
Popup and redirect authentication modes
Automatic token management and refresh

Note: Before using any authentication features, make sure you have created an auth client using createAuthClient.

1. Create auth client

First, create an auth client instance with your configuration:

import { createAuthClient } from "@vuer-ai/vuer-auth-client";

export const authClient = createAuthClient({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  clientId: import.meta.env.VITE_CLIENT_ID,
  redirectUri: "/auth/callback",
});

Note: baseURL should point to your OIDC/OAuth2 provider, clientId is your OAuth2 client ID, and redirectUri is where users will be redirected after authentication.

Vuer Auth supports two authentication modes: popup (recommended for SPAs) and redirect (traditional flow).

import { authClient } from "./auth";
import { AuthMode } from "@vuer-ai/vuer-auth-client";
import { Button, toast } from "@vuer-ai/vuer-uikit";

export function SignMethod() {
  return (
    <div className="flex gap-4 p-4">
      <Button
        onClick={async () => {
          const token = await authClient.signIn({
            authMode: AuthMode.Popup,
            callbackUrl: "/dashboard",
          });
          if (token) {
            toast.message("Sign in success!");
          }
        }}
      >
        Sign in with popup
      </Button>

      <Button
        onClick={() => {
          authClient.signIn({
            authMode: AuthMode.Redirect,
            callbackUrl: "/dashboard",
          });
        }}
      >
        Sign in with redirect
      </Button>
    </div>
  );
}

3. Get user information

Use the useUserinfo or useAuth hook to access the current user's information and authentication state.

import { Avatar, AvatarFallback, AvatarImage, Button } from "@vuer-ai/vuer-uikit";
import { authClient } from "./auth";
import { AuthMode } from "@vuer-ai/vuer-auth-client";

export function Userinfo() {
  const { user, isAuthenticated, isPending } = authClient.useAuth();

  return (
    <div className="flex w-full flex-wrap items-center justify-around gap-4 p-6">
      {isPending ? (
        <div>Loading...</div>
      ) : isAuthenticated && user ? (
        <>
          <ul className="grid grid-cols-[auto_1fr] gap-3">
            <li className="contents">
              <p>name:</p>
              <p>{user.name}</p>
            </li>
            <li className="contents">
              <p>email:</p>
              <p>{user.email}</p>
            </li>
            <li className="contents">
              <p>ID:</p>
              <p>{user.sub}</p>
            </li>
          </ul>

          <Avatar className="size-24">
            <AvatarFallback className="text-3xl">{user.name?.charAt(0)}</AvatarFallback>
            {user.picture && <AvatarImage src={user.picture} />}
          </Avatar>

          <Button className="w-full" onClick={() => authClient.signOut()}>
            Sign out
          </Button>
        </>
      ) : (
        <Button onClick={() => authClient.signIn({ authMode: AuthMode.Popup, callbackUrl: "/" })}>
          Sign in
        </Button>
      )}
    </div>
  );
}

Best Practice: Use useAuth for simple authentication checks, or useUserinfo for more detailed user information with loading and error states.

Basic Usage

1. Create auth client

2. Sign in with popup or redirect

3. Get user information