はじめに
ハマりそうだった原神放置中です、こんにちは。
早速以前投稿した記事の続きを書きたいと思います。
前回のおさらい
◆前回の記事
◆前回の目的
FirebaseAuthentication+Reactで
2種類のサインアップ（メール、Google）を実装する
◆前回の結果
- メール認証→OK
- Google認証→YET
- 作業中にnpmのトラブルに見舞われて中断
今回の目指すところ
- FirebaseAuthenticationにGoogle認証の実装
前提
環境・構成ディレクトリ
前回と変わりません
◆環境
Windows10
Firebase 9.15
React 18.2
Node.js 18.12.1
◆ディレクトリ構成（Ralacodeさんに準拠）
[src]
├─[components]
｜ ├ Home.js
｜ ├ Login.js
｜ ├ Register.js
｜ ├ PrivateRoute.js
｜ └ PublicRoute.js
├─[context]
｜ └ AuthContext.js
├─App.js
├─App.css
├─firebase.js
└─Page404.js
基本参考サイト（チュートリアル先）
この分かりやすい2つのサイトを見比べながら構築しました
他ちょこちょこみたサイト
作業内容
Google認証
前回の記事でメール認証はクリアできたのでGoogle認証にとりかかる。
まずしたこと
・Googleログイン画面だけを作る
・公式ドキュメントより下記を追加
firebase.js
//追加
import { GoogleAuthProvider } from "firebase/auth";
const provider = new GoogleAuthProvider();
ログイン処理に、signInWithPopupではなく、signInWithRedirectを利用する
公式ドキュメントを参考にコードを書いてく
Login.js
import { provider } from '../firebase';
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';
import { getAuth, signInWithRedirect } from "firebase/auth";
import { getRedirectResult, GoogleAuthProvider } from "firebase/auth";
const auth = getAuth();
getRedirectResult(auth)
.then((result) => {
// This gives you a Google Access Token. You can use it to access Google APIs.
const credential = GoogleAuthProvider.credentialFromResult(result);
const token =
credential.accessToken;
// The signed-in user info.
const user = result.user;
}).catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.customData.email;
// The AuthCredential type that was used.
const credential = GoogleAuthProvider.credentialFromError(error);
// ...
});
const Login = () => {
const navigate = useNavigate();
const [error, setError] = useState('');
const handleLogin = async (event) => {
try {
signInWithRedirect(auth, provider);
navigate('/');
} catch (error) {
console.log(error);
setError(error.message);
}
};
return (
<div>
<h1>ログイン</h1>
{error && <p style={{ color: 'red' }}>{error}</p>}
<button onClick={handleLogin}>Googleログイン</button>
</div>
);
};
export default Login;
とりあえずGoogleでログインができた。
ページ遷移もstateされていて問題ない模様。
これからGoogleログインで作ったページにメールアドレスログインフォームも追加する
Login.js
import { provider } from '../firebase';
import { useNavigate } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { getAuth, signInWithRedirect } from "firebase/auth";
import { getRedirectResult, GoogleAuthProvider } from "firebase/auth";
import { Navigate, Link } from "react-router-dom";
import {signInWithEmailAndPassword, onAuthStateChanged } from "firebase/auth";
const auth = getAuth();
getRedirectResult(auth)
.then((result) => {
// This gives you a Google Access Token. You can use it to access Google APIs.
const credential = GoogleAuthProvider.credentialFromResult(result);
const token =
credential.accessToken;
// The signed-in user info.
const user = result.user;
}).catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.customData.email;
// The AuthCredential type that was used.
const credential = GoogleAuthProvider.credentialFromError(error);
// ...
});
const Login = () => {
const navigate = useNavigate();
const [error, setError] = useState('');
const handleLogin = async (e) => {
try {
signInWithRedirect(auth, provider);
navigate('/');
} catch (error) {
console.log(error);
setError(error.message);
}
};
const [loginEmail, setLoginEmail] = useState("");
const [loginPassword, setLoginPassword] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
try {
await signInWithEmailAndPassword(
auth,
loginEmail,
loginPassword
);
} catch (error) {
alert("メールアドレスまたはパスワードが間違っています");
}
};
const [user, setUser] = useState();
useEffect(() => {
onAuthStateChanged(auth, (currentUser) => {
setUser(currentUser);
});
});
return (
<>
<h1>ログイン</h1>
<p>ログイン方法を選択してください</p>
{error && <p style={{ color: 'red' }}>{error}</p>}
<button onClick={handleLogin}>Googleログイン</button><br /><br />
{user ? (
<Navigate to={`/`} />
) : (
<>
<form onSubmit={handleSubmit}>
<div>
<label>メールアドレス</label>
<input
name="email"
type="email"
value={loginEmail}
onChange={(e) => setLoginEmail(e.target.value)}
/>
</div>
<div>
<label>パスワード</label>
<input
name="password"
type="password"
value={loginPassword}
onChange={(e) => setLoginPassword(e.target.value)}
/>
</div>
<button>メールログイン</button>
<p>新規登録は<Link to={`/register/`}>こちら</Link></p>
</form>
</>
)}
</>
);
};
export default Login;
Home.js
import React, { useState, useEffect } from "react";
import { onAuthStateChanged, signOut } from "firebase/auth";
import { auth } from "../firebase.js";
import { useNavigate, Navigate } from "react-router-dom";
const Home = () => {
const [user, setUser] = useState("");
const [loading, setLoading] = useState(true);
useEffect(() => {
onAuthStateChanged(auth, (currentUser) => {
setUser(currentUser);
setLoading(false);
});
}, []);
const navigate = useNavigate();
const logout = async () => {
await signOut(auth);
navigate("/login/");
}
return (
<>
{!loading && (
<>
{!user ? (
<Navigate to={`/login/`} />
) : (
<>
<h1>マイページ</h1>
<p>{user?.email}</p>
<button onClick={logout}>ログアウト</button>
</>
)}
</>
)}
</>
);
};
export default Home;
GoogleAuthentication使用時のちょくちょく出たエラーメッセージ
Unable to process request due to missing initial state. This may happen if browser sessionStorage is inaccessible or accidentally cleared.
ググるとFirebaseサイドの問題と出てきたので一旦放置
さいごに
これでFirebaseAuthenticationにメールとGoogle認証の実装ができた。
前編で取り組んでいたアクセス制限設定は次回以降に回します。
以上メモ代わりでした。ありがとうございました。