認証の未来、 今日

import { AuthProvider, useLogin, useAuth, useLogout } from 'authsafe-react';

function App() {
  return (
    <AuthProvider
      config={{
        clientId: 'your-client-id',
        redirectUri: 'http://localhost:3000/callback',
        scope: ['openid', 'profile', 'email'],
        env: 'production',
      }}
    >
      <YourApp />
    </AuthProvider>
  );
}

function LoginButton() {
  const { signinRedirect, isLoading } = useLogin();

  return (
    <button onClick={() => signinRedirect()} disabled={isLoading}>
      {isLoading ? 'Logging in...' : 'Login with AuthSafe'}
    </button>
  );
}

function UserProfile() {
  const { user, isAuthenticated } = useAuth();
  const { logout } = useLogout();

  if (!isAuthenticated) {
    return <LoginButton />;
  }

  return (
    <div>
      <h2>Welcome, {user?.name || user?.email}</h2>
      <button onClick={() => logout()}>Logout</button>
    </div>
  );
}