Authentication (email, Google, Apple) in React Native

Introduction

Authentication lets users prove who they are to your app. It keeps their data safe and personal.

When users need to create an account with their email and password.

When users want to sign in quickly using their Google account.

When users with Apple devices want to sign in using their Apple ID.

When you want to protect user data and personalize their experience.

When you want to allow easy login without remembering passwords.

Syntax

React Native

import { GoogleSignin } from '@react-native-google-signin/google-signin';
import { appleAuth } from '@invertase/react-native-apple-authentication';

// Email sign-in example
const signInWithEmail = async (email, password) => {
  // Use your backend or Firebase to authenticate
};

// Google sign-in example
const signInWithGoogle = async () => {
  await GoogleSignin.hasPlayServices();
  const userInfo = await GoogleSignin.signIn();
  return userInfo;
};

// Apple sign-in example
const signInWithApple = async () => {
  const appleAuthRequestResponse = await appleAuth.performRequest({
    requestedOperation: appleAuth.Operation.LOGIN,
    requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
  });
  return appleAuthRequestResponse;
};

Use libraries like @react-native-google-signin/google-signin and @invertase/react-native-apple-authentication for easy integration.

Email sign-in usually requires a backend or Firebase to verify credentials.

Examples

This example shows how to send email and password to your server for authentication.

React Native

const signInWithEmail = async (email, password) => {
  // Call backend API to check email and password
  const response = await fetch('https://example.com/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password }),
  });
  const data = await response.json();
  return data;
};

This example configures Google Sign-In and signs in the user.

React Native

import { GoogleSignin } from '@react-native-google-signin/google-signin';

GoogleSignin.configure({
  webClientId: 'your-web-client-id.apps.googleusercontent.com',
});

const signInWithGoogle = async () => {
  await GoogleSignin.hasPlayServices();
  const userInfo = await GoogleSignin.signIn();
  return userInfo;
};

This example requests Apple ID sign-in with email and full name scopes.

React Native

import { appleAuth } from '@invertase/react-native-apple-authentication';

const signInWithApple = async () => {
  const response = await appleAuth.performRequest({
    requestedOperation: appleAuth.Operation.LOGIN,
    requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
  });
  return response;
};

Sample App

This React Native app shows three ways to sign in: email, Google, and Apple. It uses simple checks for email and password, and real libraries for Google and Apple sign-in. The app shows messages to tell if sign-in worked or failed.

React Native

import React, { useState } from 'react';
import { View, Button, Text, TextInput, StyleSheet } from 'react-native';
import { GoogleSignin } from '@react-native-google-signin/google-signin';
import { appleAuth } from '@invertase/react-native-apple-authentication';

GoogleSignin.configure({
  webClientId: 'your-web-client-id.apps.googleusercontent.com',
});

export default function AuthExample() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [message, setMessage] = useState('');

  const signInWithEmail = () => {
    if(email === '[e-mail]' && password === '123456') {
      setMessage('Email sign-in successful!');
    } else {
      setMessage('Email sign-in failed.');
    }
  };

  const signInWithGoogle = async () => {
    try {
      await GoogleSignin.hasPlayServices();
      const userInfo = await GoogleSignin.signIn();
      setMessage(`Google sign-in successful! Welcome ${userInfo.user.name}`);
    } catch (error) {
      setMessage('Google sign-in failed.');
    }
  };

  const signInWithApple = async () => {
    try {
      const response = await appleAuth.performRequest({
        requestedOperation: appleAuth.Operation.LOGIN,
        requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
      });
      setMessage('Apple sign-in successful!');
    } catch (error) {
      setMessage('Apple sign-in failed.');
    }
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
        accessibilityLabel="Email input"
      />
      <TextInput
        style={styles.input}
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        accessibilityLabel="Password input"
      />
      <Button title="Sign in with Email" onPress={signInWithEmail} accessibilityLabel="Sign in with Email button" />
      <View style={{ height: 10 }} />
      <Button title="Sign in with Google" onPress={signInWithGoogle} accessibilityLabel="Sign in with Google button" />
      <View style={{ height: 10 }} />
      <Button title="Sign in with Apple" onPress={signInWithApple} accessibilityLabel="Sign in with Apple button" />
      <Text style={styles.message} accessibilityLiveRegion="polite">{message}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', padding: 20, backgroundColor: '#fff' },
  input: { borderWidth: 1, borderColor: '#ccc', padding: 10, marginBottom: 10, borderRadius: 5 },
  message: { marginTop: 20, fontSize: 16, color: 'green' },
});

Important Notes

Always test authentication on real devices because Google and Apple sign-in need device features.

Make sure to set up your app in Google and Apple developer consoles to get correct keys.

Use accessibility labels on inputs and buttons so screen readers can help users.

Summary

Authentication lets users securely access your app.

You can use email/password or social sign-ins like Google and Apple.

Use libraries to simplify integration and always handle success and failure states.