Skip to content

Instantly share code, notes, and snippets.

@kuc-arc-f
Last active May 9, 2022
Embed
What would you like to do?
firebase google Login
// src/firebase.ts
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth'
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
};
//initializeApp(firebaseConfig);
const app = initializeApp(firebaseConfig);
export const auth = getAuth();
export const db = getFirestore(app);
import React from 'react';
import { useEffect } from 'react';
import {auth} from '../../firebase';
import { onAuthStateChanged } from "firebase/auth";
//import { getAuth, signInWithRedirect } from "firebase/auth";
import { signInWithRedirect } from "firebase/auth";
import { getRedirectResult, GoogleAuthProvider } from "firebase/auth";
import { signOut } from 'firebase/auth'
const Login = () => {
const provider = new GoogleAuthProvider();
const clickLogin = function(){
signInWithRedirect(auth, provider);
}
//
useEffect(() => {
getRedirectResult(auth)
.then((result) => {
console.log(result);
if(result !== null){
const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential.accessToken;
console.log(token);
// The signed-in user info.
const user = result.user;
console.log(user);
console.log(user.uid);
}
}).catch((error) => {
console.error(error);
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
const email = error.email;
console.error(errorCode);
console.error(errorMessage);
console.error(email);
// The AuthCredential type that was used.
//const credential = GoogleAuthProvider.credentialFromError(error);
});
},[]);
const checkLogint = function(){
onAuthStateChanged(auth, (user) => {
if (user) {
const uid = user.uid;
const email = user.email;
console.log(uid);
console.log(email);
} else {
console.log("signed out");
}
});
}
checkLogint();
const clickLogout = async function (){
signOut(auth).then(()=>{
console.log("ログアウトしました");
})
.catch( (error)=>{
console.log(`ログアウト時にエラーが発生しました (${error})`);
});
}
return (
<div>
<h1>ログイン Google</h1>
<div>
<button onClick={() => clickLogin()}>Login</button>
</div>
<hr />
<hr />
<button onClick={() => clickLogout()}>Logout</button>
</div>
);
};
export default Login
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment