- SDK Version: 40.0.0
- Platforms(Android/iOS/web/all): All
Hello everyone, I am actually trying to connect to the Deezer OAuth API. I follow the AuthSession
guide with the useAuthRequest
hook.
Here is my code :
import React, { useEffect, useCallback, useState } from "react";
import { makeRedirectUri, useAuthRequest } from "expo-auth-session";
import { Image, Text, TouchableOpacity, View } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
// Endpoint
const discovery = {
authorizationEndpoint: "https://connect.deezer.com/oauth/auth.php?app_id=455342",
tokenEndpoint: "https://connect.deezer.com/oauth/access_token.php",
};
const SignIn = () => {
const [accessToken, setAccessToken] = useState();
const [request, response, promptAsync] = useAuthRequest(
{
responseType: "token",
usePKCE: false,
// For usage in managed apps using the proxy
redirectUri: makeRedirectUri({
useProxy: true,
}),
},
discovery
);
const storeToken = useCallback(
async (token) => {
try {
await AsyncStorage.setItem("deezer_token", token);
setAccessToken(token);
} catch (e) {
console.error(e);
}
},
[setAccessToken]
);
useEffect(() => {
if (response?.type === "success") {
const { access_token } = response.params;
storeToken(access_token);
}
}, [response, storeToken]);
const handleDeezerConnect = () => {
promptAsync({
useProxy: true,
redirectUri: makeRedirectUri({ useProxy: true }),
});
};
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<TouchableOpacity style={{ backgroundColor: 'black', padding: 10 }} disabled={!request} onPress={handleDeezerConnect}>
<Text style={{ color: 'white' }}>Connect with Deezer</Text>
</TouchableOpacity>
</View>
);
};
export default SignIn;
When I try to login to Deezer, my app open the Deezer web view to login but display the error message: You must specify a valid redirect_uri
I display the Url and it seems to be good for me. (FYI, I already try the same code on another third part API and it works like a charm)
The Deezer API docs say about the redirect_uri:
The URL the user will be redirected after authentication. redirect_uri must be in the same domain as the domain you defined when you created the application.
So I set the application domain to auth.expo.io