How can I authenticate Spotify in a React Native component? - react-native

Question

I am creating a React Native mobile application for a school project and I want a user to be able to login to Spotify to be able to get information about their playback using the Spotify API.
I am developing for iOS and using Expo, so have found this documentation from Expo to be quite helpful. Using their sample Auth Code, I was successfully able to make a very simple React app that allows the user to push a button that prompts them to login with Spotify. For my project, though, I have different components corresponding to different screens in my app. Whenever I try to move the code into a component, I get an error that I am unsure how to resolve (I am still pretty new to React and Javascript).
Here is the code:
import * as React from 'react';
import * as WebBrowser from 'expo-web-browser';
import { makeRedirectUri, useAuthRequest } from 'expo-auth-session';
import { View, Button, StyleSheet } from 'react-native';
import { LoginContext } from '../LoginContext';
WebBrowser.maybeCompleteAuthSession();
// Endpoint
const discovery = {
authorizationEndpoint: 'https://accounts.spotify.com/authorize',
tokenEndpoint: 'https://accounts.spotify.com/api/token',
};
const [request, response, promptAsync] = useAuthRequest(
{
clientId: CLIENT_ID,
scopes: ['user-read-email', 'playlist-modify-public'],
// In order to follow the "Authorization Code Flow" to fetch token after authorizationEndpoint
// this must be set to false
usePKCE: false,
redirectUri: 'exp://localhost:19000/--/',
},
discovery
);
React.useEffect(() => {
if (response?.type === 'success') {
const { code } = response.params;
}
}, [response]);
export default class Settings extends React.Component {
render () {
return (
<View style={{flex: 1, display: 'flex', justifyContent: 'center', alignItems: "center", alignContent: 'center'}}>
<Button
//disabled={!request}
title="Login to Spotify"
onPress={() => {
//console.log("Login attempt");
promptAsync();
}}
/>
</View>
);
}
}
I get an error message that states:
Error: Invalid hook call. Hooks can only be called inside of the body
of a function component. This could happen for one of the following
reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app See https://reactjs.org/warnings/invalid-hook-call-warning.html for tips about how to debug and
fix this problem.
I looked at the link in the error message to see if I could debug myself, but I am having some trouble given that I am still pretty new to React. Any help would be greatly appreciated!

Answer 1

useAuthRequest and useEffect are what we call React hooks. They can be used in functional components only. In my opinion, you should first check the documentation of how to use hooks in React: https://reactjs.org/docs/hooks-intro.html
WebBrowser.maybeCompleteAuthSession();
// Endpoint
const discovery = {
authorizationEndpoint: 'https://accounts.spotify.com/authorize',
tokenEndpoint: 'https://accounts.spotify.com/api/token',
};
// This is the functional component
const Settings = () => {
const [request, response, promptAsync] = useAuthRequest({
clientId: CLIENT_ID,
scopes: ['user-read-email', 'playlist-modify-public'],
// In order to follow the "Authorization Code Flow" to fetch token after authorizationEndpoint
// this must be set to false
usePKCE: false,
redirectUri: 'exp://localhost:19000/--/',
}, discovery);
React.useEffect(() => {
if (response?.type === 'success') {
const { code } = response.params;
}
}, [response]);
return (
<View>...</View>
)
}