Як реалізувати вхід через Google в React Native та Expo: покрокова інструкція

Впровадження Google Sign-In у вашому додатку React Native може значно покращити користувацький досвід, надаючи безперебійний і безпечний спосіб автентифікації користувачів. У цьому посібнику ми покажемо вам, як налаштувати Google Sign-In за допомогою Expo та React Native, використовуючи Firebase. Незалежно від того, чи ви новачок, чи досвідчений розробник, цей покроковий посібник допоможе вам реалізувати цю функцію з легкістю.

Перед початком переконайтесь, що у вас є:
- Встановлений Node.js на вашому комп'ютері.
- Встановлений Expo CLI (npm install -g expo-cli).
- Базові знання про React Native та Firebase.

1. Створіть новий додаток Expo

Виконайте наступну команду в терміналі, щоб створити новий додаток Expo:

npx create-expo-app your-app-name

Перейдіть до директорії проекту:

cd your-app-name

2. Генерація нативного коду за допомогою Expo Prebuild

Виконайте наступну команду, щоб згенерувати необхідні нативні файли:

npx expo prebuild --clean

3. Встановіть необхідний пакет

Встановіть пакет Google Sign-In:

npm install @react-native-google-signin/google-signin @react-native-async-storage/async-storage

4. Налаштуйте файл app.json

Оновіть файл app.json з наступною конфігурацією: (додайте це, не замінюйте та не видаляйте нічого)

{  
 "expo": {  
 "plugins": [  
 "@react-native-google-signin/google-signin"  
 ],  
 "android": {  
 "googleServicesFile": "./google-services.json"  
 }  
 }  
}

5. Налаштуйте Firebase

1. Перейдіть на Firebase Console.
2. Створіть новий проект.
3. Додайте новий додаток для Android:

• Package Name: Використовуйте значення з вашого app.json → android.package. Це виглядатиме як com.example.app.
• SHA-1 Fingerprint:
• Перейдіть до директорії вашого проекту та виконайте:

cd android && ./gradlew signingReport

• Використовуйте SHA-1 значення з розділу Variant: debugAndroidTest.

1. Завершіть створення додатку та перейдіть до Build → Authentication в лівій панелі.
2. У вкладці Sign-in method додайте нового постачальника:

• Виберіть Google та налаштуйте його за підказками.

1. Після налаштування, завантажте новий файл google-services.json і помістіть його в корінь вашого проекту.

6.

Налаштування екрану входу

Створіть файл з назвою app/login.tsx і додайте наступний код:

import React, { useEffect } from 'react';  
import { View, Text, Button, StyleSheet, Alert } from 'react-native';  
import { useRouter } from 'expo-router';  
import AsyncStorage from '@react-native-async-storage/async-storage';  
import { GoogleSignin, statusCodes } from '@react-native-google-signin/google-signin';  

export default function LoginScreen() {  
 const router = useRouter();  

 useEffect(() => {  
 GoogleSignin.configure({  
 webClientId: 'YOUR_WEB_CLIENT_ID', // Замініть на webClientId з вашого google-services.json з client_type: 3  
 offlineAccess: true,  
 });  
 }, []);  

 const handleLogin = async () => {  
 try {  
 await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });  
 const user = await GoogleSignin.signIn();  
 await AsyncStorage.setItem('user', JSON.stringify(user));  
 router.replace('/'); // Перехід на головний екран  
 } catch (error: any) {  
 if (error.code === statusCodes.SIGN_IN_CANCELLED) {  
 Alert.alert('Вхід скасовано');  
 } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {  
 Alert.alert('Google Play Services недоступний або застарілий');  
 } else {  
 Alert.alert('Помилка', error.message);  
 }  
 }  
 };  

 return (  
   <View style={styles.container}>  
     <Text style={styles.title}>Sign in</Text>  
     <Button title="Login with Google" onPress={handleLogin} />  
   </View>  
 );  
}  

const styles = StyleSheet.create({  
 container: {  
 flex: 1,  
 justifyContent: 'center',  
 alignItems: 'center',  
 backgroundColor: '#fff',  
 },  
 title: {  
 fontSize: 24,  
 fontWeight: 'bold',  
 marginBottom: 20,  
 },  
});

webClientId можна знайти у файлі google-services.json у розділі:

"oauth_client": [  
 {  
 "client_id": "YOUR_WEB_CLIENT_ID",  
 "client_type": 3  
 }  
]

7. Запустіть додаток

Після налаштування всього необхідного, виконайте наступні команди для збірки та тестування вашого додатку:

npx expo prebuild --clean  
npx expo run:android

Очікуваний результат

Після завершення цих кроків:

• Додаток відкриється з екраном входу.
• Користувачі зможуть увійти, використовуючи свої облікові записи Google.
• Після входу додаток збереже їхні облікові дані в AsyncStorage і перенаправить на головний екран.

Це був мій досвід, і те, що спрацювало для мене. Я слідував інструкціям від Expo та react-native-google-sign-in, але жоден з них не спрацював. Після тривалих пошуків я знайшов це рішення. Сподіваюся, воно допоможе комусь. Якщо хтось цікавіться, я не реалізував це для iOS, але кроки схожі.

Перекладено з: How to Implement Google Sign-In with React Native and Expo: A Step-by-Step Guide