Merge pull request #27 from InternAcademy/16-set-up-authentication-in…

…-the-react-native-project

16 set up authentication in the react native project

.gitignore

@@ -396,3 +396,5 @@ FodyWeavers.xsd
 
 # JetBrains Rider
 *.sln.iml
+
+.env

src/client/CookingAppFE/app.json

@@ -22,6 +22,7 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "scheme": "mealmaster"
   }
 }

src/client/CookingAppFE/components/LandingPage.js

@@ -1,7 +1,18 @@
-import React from "react";
-import { StyleSheet, Text, View, TouchableOpacity, Image } from "react-native";
+import Constants from 'expo-constants';
+import useAuth from '../hooks/useAuth';
+import * as WebBrowser from 'expo-web-browser';
+import { StyleSheet, Text, View, TouchableOpacity, Image, Button, SafeAreaView } from "react-native";
+
+const tenantId = process.env.EXPO_PUBLIC_TENANT_ID;
+const clientId = process.env.EXPO_PUBLIC_CLIENT_ID;
+
+WebBrowser.maybeCompleteAuthSession();
 
 const LandingPage = () => {
+  console.log(clientId, tenantId)
+
+  const { login, token, request } = useAuth(clientId, tenantId);
+
   return (
     <View style={styles.container}>
       <View style={styles.imageContainer}>
@@ -11,9 +22,12 @@ const LandingPage = () => {
       <Text style={styles.subtitle}>
         Easy way to manage all your cooking tasks as easy as tapping your finger
       </Text>
-      <TouchableOpacity style={styles.button}>
-        <Text style={styles.buttonText}>Get Started</Text>
-      </TouchableOpacity>
+      <Button
+        disabled={!request}
+        title="Login"
+        onPress={() => login()}
+      />
+      <Text>{token}</Text>
     </View>
   );
 };
@@ -47,17 +61,6 @@ const styles = StyleSheet.create({
     textAlign: "center",
     marginBottom: 30,
   },
-  button: {
-    backgroundColor: "#fff",
-    paddingVertical: 15,
-    paddingHorizontal: 40,
-    borderRadius: 30,
-  },
-  buttonText: {
-    fontSize: 16,
-    fontWeight: "bold",
-    color: "#f39c12",
-  },
 });
 
-export default LandingPage;
+export default LandingPage;

src/client/CookingAppFE/hooks/useAuth.js

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { exchangeCodeAsync, makeRedirectUri, useAuthRequest, useAutoDiscovery } from 'expo-auth-session';
+
+const useAuth = (clientId, tenantId) => {
+  const discovery = useAutoDiscovery(`https://mealmasterbot.ciamlogin.com/MealMasterBot.onmicrosoft.com/v2.0/`);
+
+  const redirectUri = makeRedirectUri({
+    scheme: undefined,
+    path: 'auth',
+  });
+
+  console.log(redirectUri)
+
+  const [token, setToken] = useState(null);
+
+  const [request, , promptAsync] = useAuthRequest(
+    {
+      clientId,
+      scopes: ['openid', 'profile', 'email'],
+      redirectUri,
+    },
+    discovery,
+  );
+
+  const login = async () => {
+    const codeResponse = await promptAsync();
+    if (request && codeResponse?.type === 'success' && discovery) {
+      const res = await exchangeCodeAsync(
+        {
+          clientId,
+          code: codeResponse.params.code,
+          extraParams: request.codeVerifier ? { code_verifier: request.codeVerifier } : undefined,
+          redirectUri,
+        },
+        discovery,
+      );
+      setToken(res.accessToken);
+    }
+  };
+
+  return { login, token, request };
+};
+
+export default useAuth;

src/client/CookingAppFE/package.json

@@ -15,8 +15,10 @@
     "react-native": "0.74.1",
     "react-native-web": "~0.19.10",
     "react-dom": "18.2.0",
-    "@expo/metro-runtime": "~3.2.1"
-  },
+    "@expo/metro-runtime": "~3.2.1",
+    "expo-auth-session": "~5.5.2",
+    "expo-crypto": "~13.0.2"
+    },
   "devDependencies": {
     "@babel/core": "^7.20.0"
   },