Vuer auth

The signIn method is a core function of the auth client that initiates the authentication flow. It supports two modes: popup (recommended for SPAs) and redirect (traditional flow) with PKCE security.

This replaces the previous useSignIn hook. Instead of using a hook, you call authClient.signIn() directly in your components.

Method Signature

signIn(auth: {
  authMode: AuthMode;
  callbackUrl: string;
}): Promise<Token | null>

Parameters

authMode

type: AuthMode.Popup | AuthMode.Redirect

Required - The authentication mode to use

callbackUrl

type: string

Required - URL to redirect to after successful authentication

Return Value

Popup mode: Returns Promise<Token | null> - the token object if successful, null otherwise
Redirect mode: Returns null (performs a redirect, no return value)

Authentication Modes

Opens authentication in a popup window. Better UX with no full page reload.

Pros:

No page reload
Returns token directly in promise
Better for single-page applications

Cons:

Requires popup blocker to be disabled
Uses window.postMessage for communication

Redirect Mode (Traditional)

Redirects the entire page to the authentication provider.

Pros:

Better compatibility with strict security policies
No popup blocker issues

Cons:

Full page reload
Requires callback page to handle token exchange

Usage

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

function LoginButton() {
  const handleLogin = async () => {
    const token = await authClient.signIn({
      authMode: AuthMode.Popup,
      callbackUrl: "/dashboard",
    });

    if (token) {
      console.log("Signed in successfully!");
    } else {
      console.log("Sign in cancelled or failed");
    }
  };

  return <button onClick={handleLogin}>Sign In (Popup)</button>;
}

Redirect Mode

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

function LoginButton() {
  const handleLogin = () => {
    // This will redirect the page
    authClient.signIn({
      authMode: AuthMode.Redirect,
      callbackUrl: "/dashboard",
    });
  };

  return <button onClick={handleLogin}>Sign In (Redirect)</button>;
}

Handling Redirect Callback

For redirect mode, you need a callback page to handle the token exchange:

// pages/auth/callback/page.tsx
import { useEffect } from "react";
import { authClient } from "@/auth";

export default function AuthCallback() {
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const code = params.get("code");
    const state = params.get("state");

    if (code && state) {
      authClient.getToken(code, state);
      // Will automatically redirect to callbackUrl after success
    }
  }, []);

  return <div>Completing sign in...</div>;
}

With Error Handling

import { authClient } from "@/auth";
import { AuthMode } from "@vuer-ai/vuer-auth-client";
import { useState } from "react";

function LoginButton() {
  const [error, setError] = useState<string | null>(null);

  const handleLogin = async () => {
    try {
      const token = await authClient.signIn({
        authMode: AuthMode.Popup,
        callbackUrl: "/dashboard",
      });

      if (!token) {
        setError("Failed to sign in. Please try again.");
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "Unknown error");
    }
  };

  return (
    <div>
      <button onClick={handleLogin}>Sign In</button>
      {error && <div className="error">{error}</div>}
    </div>
  );
}

signIn