Merge pull request #1 from bagusok/auth-test

Add: Google auth (beta)

Author: bagusok

.gitignore

@@ -21,4 +21,5 @@ expo-env.d.ts
 
 .env
 android
-android/*
+android/*
+keykey/*

app.json

@@ -36,6 +36,12 @@
         {
           "initialOrientation": "DEFAULT"
         }
+      ],
+      [
+        "@react-native-google-signin/google-signin",
+        {
+          "iosUrlScheme": "com.googleusercontent.apps._some_id_here_"
+        }
       ]
     ],
     "experiments": {

app/(home)/_layout.tsx

@@ -1,7 +1,6 @@
 import { Tabs } from "expo-router";
 import React from "react";
 
-import { TabBarIcon } from "@/components/navigation/TabBarIcon";
 import { Colors } from "@/constants/Colors";
 import { useColors } from "@/hooks/useColors";
 import { AntDesign, Feather } from "@expo/vector-icons";

app/(home)/all-anime.tsx

@@ -7,9 +7,9 @@ import { API_URL } from "@/constants/Strings";
 import { useColors } from "@/hooks/useColors";
 import { axiosIn } from "@/utils/axios";
 
-import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
-import { ActivityIndicator, Pressable, StyleSheet, View } from "react-native";
+import { ActivityIndicator, StyleSheet, View } from "react-native";
 import { FlatList } from "react-native-gesture-handler";
 import { SafeAreaView } from "react-native-safe-area-context";
 

app/(home)/user.tsx

@@ -1,10 +1,30 @@
+import GoogleLogin from "@/components/auth/GoogleLogin";
 import SafeAreaWrapper from "@/components/SafeAreaWrapper";
 import { CustomText } from "@/components/ui";
+import { tokenAtom } from "@/store/auth";
+import { GoogleSignin } from "@react-native-google-signin/google-signin";
+import { useAtom, useAtomValue } from "jotai";
+import { Alert } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
 
 export default function AllAnime() {
+  const [token, setToken] = useAtom(tokenAtom);
+
   return (
     <SafeAreaWrapper>
       <CustomText>All Anime</CustomText>
+
+      {!token ? <GoogleLogin /> : <CustomText>Logged in</CustomText>}
+      <TouchableOpacity
+        onPress={async () => {
+          await GoogleSignin.signOut();
+
+          setToken(null);
+          Alert.alert("Sign out success!");
+        }}
+      >
+        <CustomText>Sign Out</CustomText>
+      </TouchableOpacity>
     </SafeAreaWrapper>
   );
 }

app/_layout.tsx

@@ -15,14 +15,19 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+import { GoogleSignin } from "@react-native-google-signin/google-signin";
 
-// Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 ScreenOrientation.unlockAsync();
 
 const queryClient = new QueryClient();
 
 export default function RootLayout() {
+  GoogleSignin.configure({
+    // scopes: ["https://www.googleapis.com/auth/drive.readonly"],
+    webClientId: process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID,
+  });
+
   const [loaded, error] = useFonts({
     Poppins_400Regular,
     Poppins_600SemiBold,

components/GlobalLoading.tsx

@@ -0,0 +1,79 @@
+import { View } from "react-native";
+import { API_URL } from "@/constants/Strings";
+import { axiosIn } from "@/utils/axios";
+import { supabase } from "@/utils/supabase";
+import {
+  GoogleSignin,
+  GoogleSigninButton,
+  statusCodes,
+} from "@react-native-google-signin/google-signin";
+import { Alert } from "react-native";
+import { useSetAtom } from "jotai";
+import { tokenAtom } from "@/store/auth";
+
+export default function GoogleLogin() {
+  const setToken = useSetAtom(tokenAtom);
+
+  return (
+    <View>
+      <GoogleSigninButton
+        size={GoogleSigninButton.Size.Wide}
+        color={GoogleSigninButton.Color.Dark}
+        onPress={async () => {
+          try {
+            await GoogleSignin.hasPlayServices();
+            const userInfo = await GoogleSignin.signIn();
+            // console.log(userInfo);
+
+            if (userInfo.idToken) {
+              const { data, error } = await supabase.auth.signInWithIdToken({
+                provider: "google",
+                token: userInfo.idToken,
+              });
+
+              if (error) {
+                console.log("ERROR SUPABASE LOGIN: ", error);
+                Alert.alert("Error logging in with Supabase!");
+              } else {
+                const getToken = await axiosIn.post(
+                  `${API_URL}/anime/auth/login`,
+                  {
+                    email: data.user.email,
+                  },
+                  {
+                    headers: {
+                      Authorization: `Bearer ${data.session.access_token}`,
+                    },
+                  }
+                );
+
+                if (getToken.data && getToken.data.status == true) {
+                  console.log("TOKEN: ", getToken.data);
+                  setToken(getToken.data.data.token);
+                  Alert.alert("Token found!");
+                } else {
+                  console.log("NO TOKEN: ", getToken.data);
+                  Alert.alert("No token found!");
+                }
+              }
+            } else {
+              throw new Error("no ID token present!");
+            }
+          } catch (error: any) {
+            Alert.alert(error.toString());
+            console.log(error);
+            if (error.code === statusCodes.SIGN_IN_CANCELLED) {
+              // user cancelled the login flow
+            } else if (error.code === statusCodes.IN_PROGRESS) {
+              // operation (e.g. sign in) is in progress already
+            } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
+              // play services not available or outdated
+            } else {
+              // some other error happened
+            }
+          }
+        }}
+      />
+    </View>
+  );
+}