How to make secure backend API calls with Expo Authentication

[simpel]

Hi All!

Perhaps a stupid question but…

I’ve built an app that uses Expo Auth to authenticate the user with Google. That’s all fine and I can now use data from the logged in user to create calls to my backend API. But the API (built with Nextjs API routes) is completely open. What would be the best way to make all my API calls secure so only logged in users can do requests?

[dibyasundar]

If I’m not wrong, you want that only registered user can access the app.
for that at first save the token while doing register or sign in, then access the token and update it in App.js, do a condition like if token is found then the initial route name of navigator will be “main app” otherwise “login or register”. don’t forget to set a time out while checking the condition, otherwise it will not update the value of token.

*** advanced exmaple SplashScreen - Expo Documentation

Hope it will help you

using ActivityIndicator :

export default function App(){

const Stack = createStackNavigator();

const [token, setToken] = useState(null);

const [loading, setLoading] = useState(true);

const isUser = async() => {

  try {

    let userData = await AsyncStorage.getItem('jwt');

    let data = JSON.parse(userData);

    if(data !== null){

      setToken(data);

    }else{

      setToken(null);

    }

  } catch(e) {

    console.log(e);

  }

};

useEffect(()=>{

isUser();

setTimeout(()=>{

  setLoading(false);

},2500)

},);

if(loading){

return <ActivityIndicator style={{justifyContent:"center",flex:1}} />

};

return (

<View style={{flex:1,backgroundColor:“#e0ab24”}}>
<Stack.Navigator
headerMode=“none”
initialRouteName={token ? “ArrangeDelivery” : “Sign”}
>
<Stack.Screen name=“ArrangeDelivery” component={ArrangeDelivery} />
<Stack.Screen name=“sign” component={Sign} />
</Stack.Navigator>

);

};

Using expo-splash-screen :

import React, { useCallback, useEffect, useState } from “react”;

import { createStackNavigator } from “@react-navigation/stack”;

import { View } from “react-native”;

import { NavigationContainer } from “@react-navigation/native”;

import AsyncStorage from “@react-native-async-storage/async-storage”;

import * as SplashScreen from ‘expo-splash-screen’;

import logss from “./src/component/logss”;

import Register from “./src/component/register”;

import ArrangeDelivery from “./src/component/screens/ArrangeDelivey”;

import Sign from “./src/component/sign”;

export default function App(){

const Stack = createStackNavigator();

const [token, setToken] = useState(null);

const [appIsReady, setAppIsReady] = useState(false);

const isUser = async() => {

  try {

    let userData = await AsyncStorage.getItem('jwt');

    let data = JSON.parse(userData);

    if(data !== null){

      setToken(data);

    }else{

      setToken(null);

    }

  } catch(e) {

    console.log("Error while accessing token: ",e);

  }

};

useEffect(()=>{

async function prepare() {

  try {

    await SplashScreen.preventAutoHideAsync();

    await isUser();

    await new Promise(resolve => setTimeout(resolve, 2000));

  } catch (e) {

    console.log(e);

  } finally {

    setAppIsReady(true);

  }

};

prepare();

},);

const onLayoutRootView = useCallback(async () => {

if (appIsReady) {

  await SplashScreen.hideAsync();

}

}, [appIsReady]);

if (!appIsReady) {

return null;

};

return (

<NavigationContainer>

  <View style={{flex:1,backgroundColor:"#e0ab24"}} onLayout={onLayoutRootView}>

    <Stack.Navigator headerMode="none" initialRouteName={token ? "logss" : "sign"}>

      <Stack.Screen name="ArrangeDelivery" component={ArrangeDelivery} />

      <Stack.Screen name="verification" component={Verification} />

      <Stack.Screen name="logs" component={logs} />

      <Stack.Screen name="logss" component={logss} />

      <Stack.Screen name="sign" component={Sign} />

      <Stack.Screen name="register" component={Register} />

      <Stack.Screen name="FoodDelivery" component={FoodDelivery} />

      <Stack.Screen name="Account" component={Account} />

      <Stack.Screen name="Profile" component={ProfileScreen} />

      <Stack.Screen name="Adresses" component={AddressScreen} />

      <Stack.Screen name="Language" component={LanguageScreen} />

      <Stack.Screen name="Contact" component={ContactScreen} />

      <Stack.Screen name="Terms" component={T_C_Screen} />

      <Stack.Screen name="myDeliveries" component={MyDeliveries} />

      <Stack.Screen name="payment" component={PaymentScreen} />

      <Stack.Screen name="OrderDetails" component={OrderDetailsScreen} />

      <Stack.Screen name="Map" component={MyMap} />

      <Stack.Screen name="Pickup Assigned" component={PickupAssigned} />

      <Stack.Screen name="RateCalculator" component={RateCalculator} />

    </Stack.Navigator>

  </View>

</NavigationContainer>

);

};