I'm building a React Native app with Expo that uses the Spotify API for authentication. I'm encountering issues with the authentication flow using expo-auth-session (expo-app-auth is deprecated, & not working on Android). The Redirect URI is set up correctly in the Spotify Developer Dashboard, but the authentication process doesn't seem to work as expected. I've checked the Spotify client ID, the requested scopes, and the Redirect URI in the Expo app, but I'm still facing difficulties when i hit my Pressable button supposed to launch athentication process. Can anyone help troubleshoot this issue and suggest potential solutions? Here's a simplified version of my code:
import { LinearGradient } from "expo-linear-gradient";
import { useEffect } from "react";
import React from "react";
import * as WebBrowser from "expo-web-browser";
import { View, StyleSheet, Text, SafeAreaView, Pressable } from "react-native";
import { Entypo, MaterialIcons, AntDesign } from "@expo/vector-icons";
import { makeRedirectUri, useAuthRequest } from "expo-auth-session";
const LoginScreen = () => {
WebBrowser.maybeCompleteAuthSession();
const discovery = {
authorizationEndpoint: "https://accounts.spotify.com/authorize",
tokenEndpoint: "https://accounts.spotify.com/api/token",
};
const [request, response, promptAsync] = useAuthRequest(
{
clientId: "e4aa200f23cc4831adc492dc91cbf6dd", // Replace with your actual Spotify client ID
scopes: [
"user-read-email",
"user-library-read",
"user-read-recently-played",
"user-top-read",
"playlist-read-private",
"playlist-read-collaborative",
"playlist-modify-public",
],
usePKCE: false,
redirectUri: makeRedirectUri({
scheme: "exp",
path: "//192.168.1.15:8081/--/spotify-auth-callback",
}),
},
discovery
);
useEffect(() => {
if (response?.type === "success") {
const { code } = response.params;
// Handle the code as needed
}
}, [response]);
return (
<LinearGradient colors={["#040306", "#131624"]} style={{ flex: 1 }}>
<SafeAreaView>
<View style={{ height: 80 }} />
<Entypo
name="spotify"
size={80}
color="white"
style={{ textAlign: "center" }}
/>
<Text
style={{
textAlign: "center",
color: "white",
fontSize: 40,
fontWeight: "bold",
marginTop: 40,
}}
>
Millions of Songs Free on Spotify!
</Text>
<View style={{ height: 80 }} />
<Pressable
onPress={() => {
promptAsync();
}}
style={{
backgroundColor: "#1DB954",
padding: 10,
marginLeft: "auto",
marginRight: "auto",
width: 300,
borderRadius: 25,
alignItems: "center",
justifyContent: "center",
marginVertical: 10,
}}
>
<Text style={{ fontWeight: 500 }}>Sign in with Spotify</Text>
</Pressable>
<Pressable
style={{
backgroundColor: "#131624",
padding: 10,
marginLeft: "auto",
marginRight: "auto",
width: 300,
borderRadius: 25,
justifyContent: "center",
flexDirection: "row",
alignItems: "center",
marginVertical: 10,
borderWidth: 0.8,
borderColor: "white",
}}
>
<MaterialIcons name="phone-android" size={24} color="white" />
<Text
style={{
color: "white",
fontWeight: 500,
textAlign: "center",
flex: 1,
}}
>
Continue with phone number
</Text>
</Pressable>
<Pressable
style={{
backgroundColor: "#131624",
padding: 10,
marginLeft: "auto",
marginRight: "auto",
width: 300,
borderRadius: 25,
justifyContent: "center",
flexDirection: "row",
alignItems: "center",
marginVertical: 10,
borderWidth: 0.8,
borderColor: "white",
}}
>
<AntDesign name="google" size={24} color="#B10000" />
<Text
style={{
color: "white",
fontWeight: 500,
textAlign: "center",
flex: 1,
}}
>
Continue with Google
</Text>
</Pressable>
<Pressable
style={{
backgroundColor: "#131624",
padding: 10,
marginLeft: "auto",
marginRight: "auto",
width: 300,
borderRadius: 25,
justifyContent: "center",
flexDirection: "row",
alignItems: "center",
marginVertical: 10,
borderWidth: 0.8,
borderColor: "white",
}}
>
<AntDesign name="facebook-square" size={24} color="#3A5794" />
<Text
style={{
color: "white",
fontWeight: 500,
textAlign: "center",
flex: 1,
}}
>
Sign in with Facebook
</Text>
</Pressable>
</SafeAreaView>
</LinearGradient>
);
};
const styles = StyleSheet.create({});
export default LoginScreen;
I precise that I set my app on Spotify for Developers with the following clientId: e4aa200f23cc4831adc492dc91cbf6dd. And I also set up some different redirect URIs on the Spotify App Dashboard as: http://localhost:8081/--/spotify-auth-callback http://localhost:8081/oauthredirect exp://192.168.1.15:8081/--/spotify-auth-callback When I launch npx expo start The server is running through Metro waiting on exp://192.168.95.246:8081
When I hit the Pressable button "Sign In With Spotify", I got redirected and I have this issue (photo below). I tried with different redirect URIs but i'm still a bit lost.
Page where I am redirected after pressing the Pressable button
1. Configured the Redirect URI in the Spotify Developer Dashboard to match the one specified in my Expo app using expo-auth-session.
2.Verified that the Spotify client ID in my Expo app matches the one from the Spotify Developer Dashboard.
3.Checked and updated the requested scopes in the config object for authentication.
4.Ensured that the Redirect URI in the config object aligns with the one in the Spotify Developer Dashboard.
Despite these efforts, the authentication process using expo-auth-session does not seem to work as expected. The expected behavior is a successful authentication that redirects the user to the specified Redirect URI with an access token. However, I'm not seeing the expected results, and the authentication process may be encountering issues.
Any insights or suggestions on how to troubleshoot and resolve this issue would be greatly appreciated. Additionally, if there are any common pitfalls or best practices for using Expo, React Native, and expo-auth-session with Spotify API authentication, please advise.
I faced a similar issue. Console log the makeRedirectUri() and enter this in your Spotify Dashboard.