Authentication (email, Google, Apple) in React Native - Mini App: Build & Ship

Build: LoginScreen

This screen lets users sign in using email/password or with Google or Apple accounts.

Target UI

-------------------------
|       Login Screen     |
|-----------------------|
| Email: [___________]  |
| Password: [_______]   |
| [Login Button]        |
|                       |
| --- OR ---            |
| [Sign in with Google] |
| [Sign in with Apple]  |
-------------------------

Text inputs for email and password with labels

A Login button that prints entered email and password to console

A button to sign in with Google that prints 'Google Sign-In pressed' to console

A button to sign in with Apple that prints 'Apple Sign-In pressed' to console

Use React Native functional components and hooks

Basic styling for layout and spacing

Accessible labels for inputs and buttons

Starter Code

React Native

import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';

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

  // TODO: Add handlers for login, Google sign-in, and Apple sign-in

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Email:</Text>
      <TextInput
        style={styles.input}
        keyboardType="email-address"
        autoCapitalize="none"
        value={email}
        onChangeText={setEmail}
        accessibilityLabel="Email input"
      />

      <Text style={styles.label}>Password:</Text>
      <TextInput
        style={styles.input}
        secureTextEntry
        value={password}
        onChangeText={setPassword}
        accessibilityLabel="Password input"
      />

      {/* TODO: Add Login button */}

      {/* TODO: Add separator text "--- OR ---" */}

      {/* TODO: Add Google sign-in button */}

      {/* TODO: Add Apple sign-in button */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
    backgroundColor: '#fff'
  },
  label: {
    fontSize: 16,
    marginBottom: 4
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 8,
    marginBottom: 12,
    borderRadius: 4
  },
  separator: {
    textAlign: 'center',
    marginVertical: 12,
    color: '#666'
  },
  button: {
    marginVertical: 6
  }
});

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

React Native

import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';

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

  const handleLogin = () => {
    console.log(`Login pressed with email: ${email} and password: ${password}`);
  };

  const handleGoogleSignIn = () => {
    console.log('Google Sign-In pressed');
  };

  const handleAppleSignIn = () => {
    console.log('Apple Sign-In pressed');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Email:</Text>
      <TextInput
        style={styles.input}
        keyboardType="email-address"
        autoCapitalize="none"
        value={email}
        onChangeText={setEmail}
        accessibilityLabel="Email input"
      />

      <Text style={styles.label}>Password:</Text>
      <TextInput
        style={styles.input}
        secureTextEntry
        value={password}
        onChangeText={setPassword}
        accessibilityLabel="Password input"
      />

      <View style={styles.button}>
        <Button title="Login" onPress={handleLogin} accessibilityLabel="Login button" />
      </View>

      <Text style={styles.separator}>--- OR ---</Text>

      <View style={styles.button}>
        <Button title="Sign in with Google" onPress={handleGoogleSignIn} accessibilityLabel="Sign in with Google button" />
      </View>

      <View style={styles.button}>
        <Button title="Sign in with Apple" onPress={handleAppleSignIn} accessibilityLabel="Sign in with Apple button" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
    backgroundColor: '#fff'
  },
  label: {
    fontSize: 16,
    marginBottom: 4
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 8,
    marginBottom: 12,
    borderRadius: 4
  },
  separator: {
    textAlign: 'center',
    marginVertical: 12,
    color: '#666'
  },
  button: {
    marginVertical: 6
  }
});

This solution uses React Native functional components with hooks to manage email and password state.

We added three button handlers: one for login that prints the entered email and password, and two others for Google and Apple sign-in that print messages to the console.

The UI includes labeled TextInput fields for email and password with accessibility labels for screen readers.

Buttons are spaced with margin for clarity, and a separator text "--- OR ---" visually divides the login methods.

This simple setup helps beginners understand how to handle user input and button presses in React Native.

Final Result

Completed Screen

-------------------------
|       Login Screen     |
|-----------------------|
| Email: [user@example] |
| Password: [•••••••]   |
| [Login Button]        |
|                       |
| --- OR ---            |
| [Sign in with Google] |
| [Sign in with Apple]  |
-------------------------

Typing in email and password updates the input fields

Pressing Login button logs email and password to console

Pressing 'Sign in with Google' logs 'Google Sign-In pressed' to console

Pressing 'Sign in with Apple' logs 'Apple Sign-In pressed' to console

Stretch Goal

Add a loading spinner that shows when Login button is pressed and hides after 2 seconds

💡 Hint

Use useState to track loading state and setTimeout to simulate delay