Unable to get react-native-auth0 access token on web

Get Help
,
1

I’m building an expo app that targets the Android and web platforms. I’m using react-native-auth0 to enable the user to login with their Google account. The app then uses getCredentials to retrieve the access token so it be sent with requests to a REST API.

This is working on Android, but on web I get a “consent_required” error.

When I logged in, I navigated through what looked liked a consent screen. Why am I getting the consent error in the app? Here are snippets of my implementation:

// app/src/app/login.tsx

import { useRouter } from "expo-router";
import { ActivityIndicator, Text, View } from "react-native";
import { useAuth0 } from "react-native-auth0";
import { Button } from "react-native-paper";
import { useState } from "react";

export default function Login() {
  const { error, authorize } = useAuth0();
  const [pending, setPending] = useState(false);
  const router = useRouter();

  async function login() {
    setPending(true);
    const credentials = await authorize({ audience: 'https://myapi.com' });
    if (credentials) {
      router.replace('./(logged-in)');
    } else {
      setPending(false);
    }
  }

  if (pending) {
    return <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <ActivityIndicator size={72}/>
    </View>;
  }

  if (error) {
    console.error(error);
    return <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 18, marginBottom: 48 }}>An error occured while logging in.</Text>
      <Button
        mode="contained"
        onPress={login}
      >
        Try Again
      </Button>
    </View>
  }

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24, marginBottom: 48 }}>Welcome!</Text>
      <Button
        mode="contained"
        onPress={login}
      >
        Login
      </Button>
    </View>
  );
}

// app/src/app/_layout.tsx

import { Slot } from "expo-router";
import { Auth0Provider } from "react-native-auth0";
import { PaperProvider } from "react-native-paper";

export default function RootLayout() {
  return <Auth0Provider
    domain="..."
    clientId="..."
  >
    <PaperProvider>
        <Slot/>
    </PaperProvider>
  </Auth0Provider>;
}

// app/src/app/(logged-in)/_layout.tsx

import { Redirect } from "expo-router";
import { useAuth0 } from "react-native-auth0";
import { View, ActivityIndicator } from "react-native";
import { useEffect } from "react";
import { Text } from "react-native-paper";

export default function LoggedInLayout() {
  const { user, isLoading, getCredentials } = useAuth0();

  useEffect(() => {
    async function getAccessToken() {
      const credentials = await getCredentials();
      console.log('Access Token:', credentials.accessToken);
    }

    if (user) {
      getAccessToken();
    }
  }, [user]);

  if (isLoading) {
    return <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <ActivityIndicator size={72}/>
    </View>;
  }

  if (!user) {
    return <Redirect href="/login" />;
  }

  return <Text>Welcome, {user.name}!</Text>
}
3

Hi @coryfin13

Welcome to the Auth0 Community!

Whenever you try to retrieve the user credentials using getAccessToken, getAccessTokenSilently or when they are redirected to authorization, are you passing in the correct audience or scopes every time?

Also, if you go to your APIs settings inside the Auth0 Dashboard, if you enable Allow Skipping User Consent, does the issue persist or not?

Kind Regards,
Nik