Tutorials > Private Screen

🔐 You might need some pages that you only want your logged in users to be able to see such as profile/account page etc. It is pretty easy to configure your protected app screens with React Native Starter AI!

Protected API

🔒 Need to have protected API calls? 🚀 Follow the Protected API tutorial to create new ones easily!

🔒 We already have a authentication store in the codebase. Every time a user logs in or logs out, the store's values are getting updated and the store is getting populated by the user information.

And the authentication store is also persistent; so across closing and opening the mobile application, your users stay authenticated because it uses React Native Async Storage under the hood along with the store logic.

Check this out! A simple profile screen showing the user's data:

react-native-starter-mobile/screens/tabs/Profile/Profile.tsx

import React, { useEffect } from "react";
  import {
    View,
    StyleSheet,
    Text,
    TouchableOpacity,
    Image,
    ScrollView,
  } from "react-native";
  import auth from "@react-native-firebase/auth";
  
  import { useSafeAreaInsets } from "react-native-safe-area-context";
  import { NativeStackNavigationProp } from "@react-navigation/native-stack";
  import { useNavigation } from "@react-navigation/native";
  import { RootStackParamList } from "../../index";
  import MaskedView from "@react-native-masked-view/masked-view";
  import { LinearGradient as ExpoLinerGradient } from "expo-linear-gradient";
  import Svg, { Defs, LinearGradient, Path, Rect, Stop } from "react-native-svg";
  import { useAppDispatch, useAppSelector } from "store";
  import { authSlice } from "store/slices/auth.slice";
  
  const ProfileScreen = () => {
    const dispatch = useAppDispatch();
    const userUid = useAppSelector((state) => state.auth.user?.uid);
    const userFullname = useAppSelector((state) => state.auth.user.name);
    const userProfilePhoto = useAppSelector((state) => state.auth.user.profilePicture)

    // Here we are checking the authentication status and redirecting the user if not authenticated
    useEffect(() => {
      if (!userUid) {
        navigation.replace("Authentication");
      }
    }, [userUid]);
  
    const handleSignOut = async () => {
      await auth().signOut();
      dispatch(authSlice.actions.setUser(null));
    };
  
    return (
      <ScrollView
        contentContainerStyle={{ ...styles.container, marginTop: insets.top }}
      >
        <View style={styles.avatarContainer}>
          <Image
            source={{uri: }}
            style={{ width: 40, height: 40 }}
          />
          <Text style={styles.nameText}>{user.name}</Text>
        </View>
  
        <View>
          <View style={{ marginTop: 32 }}>
            <TouchableOpacity
              onPress={handleSignOut}
            >
              <Text style={styles.bottomButtonText}>Sign Out</Text>
            </TouchableOpacity>
            <View style={{ height: 70 }} />
          </View>
        </View>
      </ScrollView>
    );
  };
  
  const styles = StyleSheet.create({
    container: {
      padding: 20,
      position: "relative",
    },
    avatarContainer: {
      marginTop: 16,
      backgroundColor: "rgba(255, 255, 255, 0.16)",
      borderRadius: 20,
      padding: 16,
      flexDirection: "row",
      alignItems: "center",
      gap: 12,
    },
    bottomButtonText: {
      color: "white",
      fontFamily: "Inter-Medium",
      fontSize: 14,
    },
  });
  
  export default ProfileScreen;
  