Next.js Firebase v9: Войдите с помощью Google

Часть 16. Войдите с помощью GoogleAuthProvider

Чтобы приложение могло войти в систему с помощью учетной записи Google, нам нужно вернуться к firebase.js (файлу конфигурации). Импортировать getAuth, GoogleAuthProvider из firebase auth.

Смотрите видео сериал и исходный код

Создайте постоянную аутентификацию с помощью getAuth, создайте поставщика с помощью GoogleAuthProvider.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
import { getFirestore } from "firebase/firestore";
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: ",
storageBucket: "wm",
messagingSenderId: "",
appId: ""
};
const app = initializeApp(firebaseConfig);
const db = getFirestore()
const auth = getAuth();
const provider = new GoogleAuthProvider();
export { db, auth, provider}

Примечание. Помните, что нам нужно указать авторизацию и поставщика после intiializeApp, иначе вы получите следующую ошибку.

Создать функцию входа

Перейдите к login.js, импортируйте signInwithPopup из аутентификации firebase, импортируйте auth и provider из файла конфигурации firebase.

import { signInWithPopup } from 'firebase/auth';
import { auth, provider } from '../firebase'

Создайте функцию loginwithGoogle.

<Button
variant="contained"
startIcon={<GoogleIcon />}
onClick={loginWithGoogle}
>
Login with Google
</Button>

Проверить вход

Теперь мы можем попробовать войти в систему и посмотреть, появятся ли токен и пользователь.

Вы можете видеть, что мы получаем токен, а также информацию о пользователе в консоли.

Подписывайтесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram, Gumroad.

Больше контента наplainenglish.io