import { StyleSheet, Text, View, SafeAreaView, Pressable } from "react-native";
import React, { useEffect } from "react";
import { LinearGradient } from "expo-linear-gradient";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { useNavigation } from "@react-navigation/native";
import * as WebBrowser from "expo-web-browser";
import { makeRedirectUri, useAuthRequest } from "expo-auth-session";
import { CLIENT_ID, REDIRECT_URL } from "@env";
import { Entypo, MaterialIcons, AntDesign } from "@expo/vector-icons";
WebBrowser.maybeCompleteAuthSession();
const discovery = {
authorizationEndpoint: "https://accounts.spotify.com/authorize",
tokenEndpoint: "https://accounts.spotify.com/api/token",
};
const LoginScreen = () => {
const navigation = useNavigation();
useEffect(() => {
const checkTokenValidity = async () => {
const accessToken = await AsyncStorage.getItem("token");
const expirationDate = await AsyncStorage.getItem("expirationDate");
console.log("access token: ", accessToken);
console.log("expiration date: ", expirationDate);
if (accessToken && expirationDate) {
const currentTime = Date.now();
if (currentTime < parseInt(expirationDate)) {
// token is valid
navigation.replace("Main");
} else {
// token expired
AsyncStorage.removeItem("token");
AsyncStorage.removeItem("expirationDate");
}
}
};
checkTokenValidity();
}, []);
async function handleAuth() {
/*const config = {
issuer: "https://accounts.spotify.com",
clientId: CLIENT_ID,
scopes: [
"user-read-email",
"user-library-read",
"user-top-read",
"user-read-recently-played",
"playlist-read-private",
"playlist-read-collaborative",
"playlist-modify-public",
// "playlist-modify-private",
],
redirectUrl: REDIRECT_URL
};
const result = await AppAuth.authAsync(config);*/
const [request, response, promptAsync] = useAuthRequest({
clientId: CLIENT_ID,
scopes: [
"user-read-email",
"user-library-read",
"user-top-read",
"user-read-recently-played",
"playlist-read-private",
"playlist-read-collaborative",
"playlist-modify-public",
// "playlist-modify-private",
],
usePKCE: false,
redirectUri: REDIRECT_URL,
}, discovery);
console.log(response);
/*if (result.accessToken) {
const expirationDate = new Date(
result.accessTokenExpirationDate
).getTime();
AsyncStorage.setItem("token", result.accessToken);
AsyncStorage.setItem("expirationDate", expirationDate.toString());
navigation.navigate("Main");
}*/
}
return (
<LinearGradient colors={["#040306", "#131624"]} style={{ flex: 1 }}>
<SafeAreaView>
<View style={{ height: 80 }} />
<Entypo
style={{ textAlign: "center" }}
name="spotify"
size={80}
color="white"
/>
<Text
style={{
color: "white",
fontSize: 40,
fontWeight: "bold",
textAlign: "center",
marginTop: 40,
}}
>
Millions of Songs Free on Spotify
</Text>
<View style={{ height: 80 }} />
<Pressable
onPress={handleAuth}
style={{
backgroundColor: "#1DB954",
padding: 10,
marginLeft: "auto",
marginRight: "auto",
width: 300,
borderRadius: 25,
alignItems: "center",
justifyContent: "center",
}}
>
<Text>Sign In with Spotify</Text>
</Pressable>
<Pressable
style={{
backgroundColor: "#131624",
padding: 10,
marginLeft: "auto",
marginRight: "auto",
width: 300,
borderRadius: 25,
alignItems: "center",
justifyContent: "center",
flexDirection: "row",
marginVertical: 10,
borderColor: "#C0C0C0",
borderWidth: 0.8,
}}
>
<MaterialIcons name="phone-android" size={24} color="white" />
<Text
style={{
fontWeight: "500",
color: "white",
textAlign: "center",
flex: 1,
}}
>
Continue with phone number
</Text>
</Pressable>
<Pressable
style={{
backgroundColor: "#131624",
padding: 10,
marginLeft: "auto",
marginRight: "auto",
width: 300,
borderRadius: 25,
alignItems: "center",
justifyContent: "center",
flexDirection: "row",
marginVertical: 10,
borderColor: "#C0C0C0",
borderWidth: 0.8,
}}
>
<AntDesign name="google" size={24} color="red" />
<Text
style={{
fontWeight: "500",
color: "white",
textAlign: "center",
flex: 1,
}}
>
Continue with Google
</Text>
</Pressable>
<Pressable
style={{
backgroundColor: "#131624",
padding: 10,
marginLeft: "auto",
marginRight: "auto",
width: 300,
borderRadius: 25,
alignItems: "center",
justifyContent: "center",
flexDirection: "row",
marginVertical: 10,
borderColor: "#C0C0C0",
borderWidth: 0.8,
}}
>
<Entypo name="facebook" size={24} color="blue" />
<Text
style={{
fontWeight: "500",
color: "white",
textAlign: "center",
flex: 1,
}}
>
Continue with Facebook
</Text>
</Pressable>
</SafeAreaView>
</LinearGradient>
);
};
export default LoginScreen;
const styles = StyleSheet.create({});