組み立て済みコンポーネント

すぐに使える認証コンポーネントで、迅速な統合が可能です。

概要

AuthSafeは、あらかじめスタイルが設定された認証コンポーネントを提供します。SignInButton（サインインフローにリダイレクト）、SignOutButton（サインアウトしてセッションをクリア）、UserButton（ユーザー情報とサインアウトを表示するドロップダウンメニュー）です。すべてのコンポーネントは標準的なHTMLボタンプロパティを受け入れ、完全にカスタマイズ可能です。

基本的な使い方

import { SignInButton, SignOutButton, UserButton } from 'authsafe-nextjs';

export default function NavBar({ isAuthenticated }) {
  return (
    <nav>
      {isAuthenticated ? (
        <>
          <UserButton />
          <SignOutButton>Log Out</SignOutButton>
        </>
      ) : (
        <SignInButton>Sign In</SignInButton>
      )}
    </nav>
  );
}

ベストプラクティス

SignInButtonとSignOutButtonを使用して、認証を迅速に統合しましょう。
UserButtonは、ユーザー情報とサインアウトオプションを含むドロップダウンメニューを提供します。
useAuth() フックを使用して、完全にカスタマイズされた認証コンポーネントを構築します。

概要

基本的な使い方

import { SignInButton, SignOutButton, UserButton } from 'authsafe-nextjs';

export default function NavBar({ isAuthenticated }) {
  return (
    <nav>
      {isAuthenticated ? (
        <>
          <UserButton />
          <SignOutButton>Log Out</SignOutButton>
        </>
      ) : (
        <SignInButton>Sign In</SignInButton>
      )}
    </nav>
  );
}

ベストプラクティス

SignInButtonとSignOutButtonを使用して、認証を迅速に統合しましょう。
UserButtonは、ユーザー情報とサインアウトオプションを含むドロップダウンメニューを提供します。
useAuth() フックを使用して、完全にカスタマイズされた認証コンポーネントを構築します。