メール&パスワードログイン

1import { signOut } from 'firebase/auth';
2import { useRouter } from 'next/router';
3import React from 'react';
4import EmailPasswordLogin from '../components/email-password-login-form';
5import EmailRegisterForm from '../components/email-register-form';
6import PasswordForm from '../components/password-form';
7import ResetPasswordForm from '../components/reset-password-form';
8import { useAuth } from '../context/auth';
9import { auth } from '../firebase/client';
10
11const PasswordLogin = () => {
12  const { firebaseUser } = useAuth();
13  const router = useRouter();
14  const view =
15    (router.query.view as
16      | 'reset-password'
17      | 'register'
18      | 'login'
19      | 'set-password') || 'register';
20
21  return (
22    <div>
23      {firebaseUser && (
24        <p className="p-3 rounded-lg mb-4 bg-black/20 text-sm">
25          {firebaseUser.email} でログイン中です。
26          <button className="text-pink-500" onClick={() => signOut(auth)}>
27            ログアウト
28          </button>
29        </p>
30      )}
31
32      {view === 'register' && <EmailRegisterForm />}
33      {view === 'set-password' && <PasswordForm />}
34      {view === 'reset-password' && <ResetPasswordForm />}
35      {view === 'login' && <EmailPasswordLogin />}
36    </div>
37  );
38};
39
40export default PasswordLogin;