useAuthCallback

useAuthCallbackフックは、ユーザーが認証サーバーからリダイレクトされた後に発生するOAuthコールバックを処理します。

基本的な使い方

import { useAuthCallback } from 'authsafe-react';

function CallbackPage() {
  const { isLoading, error, isSuccess } = useAuthCallback();

  if (isLoading) return <div>Processing login...</div>;
  if (error) return <div>Login failed: {error.message}</div>;
  if (isSuccess) return <div>Login successful! Redirecting...</div>;

  return null;
}

戻り値

財産	タイプ	説明
`isLoading`	`boolean`	コールバックが処理されているかどうか
`error`	`Error \| null`	コールバック処理が失敗した場合のエラーオブジェクト
`isSuccess`	`boolean`	コールバックが正常に処理されたかどうか

ルート設定

アプリケーションにコールバックルートを設定します。

// App.tsx
import { BrowserRouter, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <AuthProvider config={config}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/callback" element={<CallbackPage />} />
        </Routes>
      </BrowserRouter>
    </AuthProvider>
  );
}

型定義

interface IUseAuthCallback {
  isLoading: boolean;
  error: Error | null;
  isSuccess: boolean;
}

認証フロー

ユーザーがログインボタンをクリック
ブラウザはAuthSafe認証サーバーにリダイレクトされます
ユーザーが認証を行い、同意を与える
AuthSafeは認証コードとともにコールバックURLにリダイレクトします。
useAuthCallbackは、コードとトークンを交換します（PKCEで保護されています）。
ユーザーセッションが確立され、アプリが宛先にリダイレクトされます。

ベストプラクティス

コールバック処理中は常にローディングインジケーターを表示する
明確なユーザーメッセージでエラーを適切に処理する
成功後にリダイレクトを設定し、ユーザーを目的のページに誘導します。
AuthSafeアプリケーションの設定でコールバックURLを登録してください。
本番環境ではコールバックURLにHTTPSを使用してください。

基本的な使い方

import { useAuthCallback } from 'authsafe-react';

function CallbackPage() {
  const { isLoading, error, isSuccess } = useAuthCallback();

  if (isLoading) return <div>Processing login...</div>;
  if (error) return <div>Login failed: {error.message}</div>;
  if (isSuccess) return <div>Login successful! Redirecting...</div>;

  return null;
}

財産

タイプ

説明

isLoading

boolean

コールバックが処理されているかどうか

error

Error | null

コールバック処理が失敗した場合のエラーオブジェクト

isSuccess

boolean

コールバックが正常に処理されたかどうか

ルート設定

アプリケーションにコールバックルートを設定します。

// App.tsx
import { BrowserRouter, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <AuthProvider config={config}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/callback" element={<CallbackPage />} />
        </Routes>
      </BrowserRouter>
    </AuthProvider>
  );
}

型定義

interface IUseAuthCallback {
  isLoading: boolean;
  error: Error | null;
  isSuccess: boolean;
}

認証フロー

ユーザーがログインボタンをクリック
ブラウザはAuthSafe認証サーバーにリダイレクトされます
ユーザーが認証を行い、同意を与える
AuthSafeは認証コードとともにコールバックURLにリダイレクトします。
useAuthCallbackは、コードとトークンを交換します（PKCEで保護されています）。
ユーザーセッションが確立され、アプリが宛先にリダイレクトされます。

ベストプラクティス

コールバック処理中は常にローディングインジケーターを表示する
明確なユーザーメッセージでエラーを適切に処理する
成功後にリダイレクトを設定し、ユーザーを目的のページに誘導します。
AuthSafeアプリケーションの設定でコールバックURLを登録してください。
本番環境ではコールバックURLにHTTPSを使用してください。