今回は、ボタンをクリックすると簡単にログインできるゲストログイン機能を作成していきます。
ポートフォリオなどを作る際に、評価していただく方がわざわざformに入力する必要がないように、ゲストログインボタンは作っておいて損はないと思います。
それでは見ていきましょう😎
前提🙆♂️
- ReactとFirebaseでログイン機能を含むユーザー認証周りを作れるまたは既に完成している
- ゲストログインに関して大まかな実装の方法を知りたい場合
- 今回、firebaseの匿名認証は使いません
前提は上記の通りです。
FirebaseとReactでのログイン機能や会員登録機能についてわからないという場合は、以下のYouTube動画がおすすめです。
React Authentication Crash Course With Firebase And Routing
英語ではありますが、コードだけ見ていても多少は理解できると思います。
日本語解説については、Firebase React 認証などで検索すればいろいろ記事が出てきます。
実装🛠
さて、早速実装していきます。
と言っても、ログインの機能を既に作成済みであればとても簡単です。
考え方としては、あらかじめgest userを作成しておき、ボタンをクリックしたときに自動的にそのguest userのemailとpasswordを使ってログインが行われるようにするという感じです。
guest userのemailはguest@example.com、パスワードはpasswordとしてあらかじめアカウントを作成しておきます。
| ログインの手段 | 違い |
|---|---|
| 普通のログイン | formにemailとpasswordを入力し、その値を使ってfirebaseのsignInWithEmailAndPasswordでログインする |
| ゲストログイン | ボタンをクリックしたら、ゲストログインの関数を実行させ、signInWithEmailAndPasswordに変数ではなく、直接guest@example.comとpasswordを渡す |
コードで説明した方がわかりやすいかもしれませんねw
hooksなどの定義やimport含め長くなりすぎるので省略しています。
export default function Login() {
const inputEmail = useCallback((event) => {
setEmail(event.target.value)
}, [setEmail]);
const inputPassword = useCallback((event) => {
setPassword(event.target.value)
}, [setPassword]);
//通常のログインの場合のログインボタンを押した後の処理
const handleSubmit = async(e) {
e.preventDefault()
setError("")
setLoading(true)
//login()の処理は別ファイルに記述しています。
//loginではsignInWithEmailAndPasswordでログイン処理をしています。
return login(email, password)
.then(() => {
history.push("/")
})
.catch((error) => {
setError("failed!!")
})
.finally(() => {
setLoading(false)
});
}
//以下ゲストログイン用の処理(ほぼ通常のログインと同じです)
const onClickGuestButton = () => {
setError("")
setLoading(true)
//loginの処理で直接emailとpasswordをloginに渡しています。
return login("guest@example.com", "password")
.then(() => {
history.push("/")
})
.catch((error) => {
setError("failed!!")
})
.finally(() => {
setLoading(false)
});
}
return(
<>
{/*ここにformのコードがあります*/}
{/*ここからがゲストログインボタン。formの外に書いてます*/}
<Button onClick={onClickGuestButton}>
ゲストユーザーとしてログイン
</Button>
</>
)
以下は、loginの処理が書いてあるAuthContext.jsxです
const login = (email, password) => {
return auth.signInWithEmailAndPassword(email, password)
}
signInWithEmailAndPasswordはfirebaseのメソッドです。
これで実装完了です🤩
最後に🖊
いかがだったでしょうか？
ログイン機能を既に実装できているのであれば、ゲストログインボタンは結構簡単にできるものですよね。
作っておいて損はないです🙆♂️
もし、役に立ったと感じていただけたらLGTMお願いします!!🙏