How to integrate NestJS/passport with React Native/Expo?

Question

As the title suggests, what is the correct mental model for integrating NestJS/passport authentication and authorization with a React Native app?

For context, I'm not that familiar with JWT but trying to learn, and right now my react native/expo app authenticates users using AuthSession and google oauth api from Expo. Purely client-side. And Im just starting to work on a NestJS backend.

I really apologize that this is such a nebulous question, but where does NestJS/passport auth integrate with my previous auth solution? I feel like there's a massive gap in my knowledge.

What I would like to do, is create protected/authorized routes and associate documents in DB with users, etc.

Am I supposed to modify my backend auth routes to receive the accessToken from the clientside?

Here is my sign-in screen for react-native:

export default function SignInScreen() {
  const { auth, setAuth } = useAuthStore()

  const [_request, response, promptAsync] = useAuthRequest({
    androidClientId: ANDROID_CLIENT_ID,
    iosClientId: IOS_CLIENT_ID,
    expoClientId: EXPO_CLIENT_ID,
  })

  useEffect(() => {
    if (response?.type === 'success') {
      console.log('response is', JSON.stringify(response, null, 2))
      setAuth(response.authentication)

      const persistAuth = async () => {
        await AsyncStorage.setItem(
          'auth',
          JSON.stringify(response.authentication)
        )
      }
      persistAuth()
    }
  }, [response])

  /* NOTE:
   * This is the code that fetches previous auth from AsyncStorage.
   * Needs to be uncommented after styling sign in screen
   *
   */
  // useEffect(() => {
  //   const getPersistedAuth = async () => {
  //     const authString = await AsyncStorage.getItem('auth')
  //     if (authString) {
  //       const auth = JSON.parse(authString)
  //       if (!TokenResponse.isTokenFresh(auth.accessToken)) {
  //         return await refreshToken()
  //       }
  //       setAuth(auth);
  //     }
  //   }
  //   getPersistedAuth()
  // }, [])

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Box 
        flex={1} 
        justifyContent='center' 
        alignItems='center'
        borderWidth={1}
        backgroundColor="tertiary.300"
      >
        <Image
          borderWidth={2}
          borderColor='primary.50'
          source={require('../../../assets/login-removebg-preview.png')}
          size={'2xl'}
          resizeMode='contain'
          alt='sign in image'
        />

        <Text
          fontSize={34}
        >Optimize Me</Text>

        <AuthForm />

        {!auth && (
          <Button
            variant={'ghost'}
            colorScheme='emerald'
            borderWidth={1.5}
            borderColor='primary.50'
            borderRadius={10}
            padding={3}
            leftIcon={<AntDesign name='google' size={24} color='#2BC8B2' />}
            onPress={() => {
              selectionAsync()
              promptAsync()
            }}
          />

        )}
      </Box>
      <StatusBar style='auto' />
    </SafeAreaView>
  )
}

Should I wrap promptAsync() and selectionAsync() in a function that also hits the Auth endpoint at NestJS backend that would send over the accessToken, and then the server reissues a new one?

I would be super grateful if anyone could suggest alternative approaches as well. Any advice would be super appreciated.

Thanks in advance!

Answer 1

where does NestJS/passport auth integrate with my previous auth solution? I feel like there's a massive gap in my knowledge.

the difference is when you are using your own backend you have to handle security that the previous auth solution provides by default. in our case, we want to handle this and be sure that someone has permission to do something. here comes the idea of creating a token for each user when he logs in and then when he tries to communicate with our backend he should send his token along with the request so we check if it is valid. we can also, from the token's information, give him limited access.
and JWT are, let's say, a "type" of token

If you are trying to learn you have to follow docs, now forget about your mobile app and start building your backend with Nestjs the documentation is really detailed, there is a section where you can find how to validate with passport using a strategy as JWT, to validate JWT tokens and decrypt them with Nestjs then from your React app you just receive the token from backend with an API request and use it on every request you make to the backend server. that it! there is no other work on that part you have to learn, you will deal with data like you used to do