useAuth()

クライアントコンポーネントの主要な認証フックです。認証状態と認証方法を提供します。

概要

useAuth() フックは、isAuthenticated、isLoading、user、error などの認証状態へのアクセスを提供するとともに、クライアントコンポーネントでの認証フローを制御するための signIn()、signOut()、refreshSession() などのメソッドを提供します。

基本的な使い方

'use client';
import { useAuth } from 'authsafe-nextjs';

export default function Dashboard() {
  const { isAuthenticated, user, signIn, signOut } = useAuth();

  if (!isAuthenticated) {
    return <button onClick={() => signIn()}>Sign In</button>;
  }

  return (
    <div>
      <p>Welcome, {user?.name}</p>
      <button onClick={() => signOut()}>Sign Out</button>
    </div>
  );
}

ベストプラクティス

フリッカーを防ぐため、isLoading 状態を常に適切に処理してください。
signIn に returnTo オプションを指定して、認証後にユーザーをリダイレクトします。
サーバーサイドのルート保護にはミドルウェアと組み合わせる

概要

基本的な使い方

'use client';
import { useAuth } from 'authsafe-nextjs';

export default function Dashboard() {
  const { isAuthenticated, user, signIn, signOut } = useAuth();

  if (!isAuthenticated) {
    return <button onClick={() => signIn()}>Sign In</button>;
  }

  return (
    <div>
      <p>Welcome, {user?.name}</p>
      <button onClick={() => signOut()}>Sign Out</button>
    </div>
  );
}

ベストプラクティス

フリッカーを防ぐため、isLoading 状態を常に適切に処理してください。
signIn に returnTo オプションを指定して、認証後にユーザーをリダイレクトします。
サーバーサイドのルート保護にはミドルウェアと組み合わせる