Adds user authentication workflow #3

swapnilkamat23 · 2023-05-19T04:42:24Z

This PR -

Implements login api that makes a service call to authenticate the user
Implements helper functions to store key values to the async store
Stores the login object in the async store after successful authentication (TO BE CHANGED - Currently the login object is user object. As discussed, we will separate the user object from login object. Login object should only contain the authentication status, true if success and false if failed to auth.)
Implements an account screen which houses a logout button to complete/test the auth workflow. (NOTE - the account screen is NOT a focus of this PR. The CRUD operations in account screen will be added in upcoming PR)
Implements a reusable component TextInput that we can use across the app
Implements ActivityIndicator, which is basically a loading indicator when waiting for synchronous/blocking api calls (such as login)
Implements an animated SplashScreen, visible during app load

Simulator.Screen.Recording.-.iPhone.12.Pro.Max.-.2023-05-18.at.22.02.01.mp4

Coming up in next PR -

Add a component for error messages so that when the user authentication fails it displays the error message.
Connect the account screen to the service for CRUD operations

swapnilkamat23 · 2023-05-19T04:45:20Z

app/views/screens/LoginScreen.js

  const authContext = useContext(AuthContext);
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
+  const [username, setUsername] = useState();


@ndedhia1210 Updated this line per your comment on the previous PR.

ndedhia1210 · 2023-05-24T23:21:18Z

App.js

 import { NavigationContainer } from "@react-navigation/native";
+import * as SplashScreen from "expo-splash-screen";


I liked this.

ndedhia1210 · 2023-05-24T23:24:10Z

App.js

+      } finally {
+        setIsReady(true);
+      }


Do we need Finally? Because incase of error we should display error screen and having boolean for ready will not distinguish whether it is succeeded or failed?

How about we initialize loadingState which can have values like [Succeeded, Failed, Loading, Idle]
So basically

// Some other file export enum AsyncStatus { Idle = 'Idle', Loading = 'Loading', Succeeded = 'Succeeded', Failed = 'Failed', } // This file const [appStatus, setAppStatus] = useState(Async.Idle); .... try { ... setAppStatus(Async.Succeeded) } catch(error) { setAppStatus(Async.Failed) } ... // Just demonstrating what we should render switch(appStatus) { case Async.Idle: return null; case Async.Failed: return <ErrorComponent />; case Async.Succeeded: return <ActualComponent />; case Async.Loading: return <SplashScreen />; }

Loved this idea.. Updated

ndedhia1210 · 2023-05-24T23:32:48Z

app/api/client.js

+import { create } from "apisauce";
+
+const apiClient = create({
+  baseURL: "https://ill-gold-parrot-sock.cyclic.app",


I would prefer to place endpoints and other details in environment (.env) file or Config.

I was thinking of refactoring this later, but why not now!?!.. updated :)

ndedhia1210 · 2023-05-24T23:34:01Z

app/api/hooks/useApi.js

+  const [data, setData] = useState([]);
+  const [error, setError] = useState(false);
+  const [loading, setLoading] = useState(false);


These 3 state can be combined to one say status and we can reuse the AsyncStatus logic here. which I described above.

ndedhia1210 · 2023-05-24T23:35:32Z

app/api/login.js

+const login = (username, password) =>
+  client.post("/login", { username, password });
+


Non-blocking comment

It is okay for now but we should also add validation logic before service call.
For eg: validate username and password are not null, regex (if any) etc...

-> This will help to prevent service call for which backend will throw error.

Yes, will create a separate dedicated PR for validation.

ndedhia1210 · 2023-05-24T23:37:22Z

app/store/asyncStorage.js

+
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+const storeData = async (key, value) => {


This file is interesting and liked it, would like to understand the running scenarios.

Yeah, lets discuss scenarios during our next sync-up

ndedhia1210 · 2023-05-24T23:38:29Z

app/views/components/Screen.js

@@ -11,7 +18,10 @@ import { SafeAreaView, StyleSheet, View } from "react-native";
 function Screen({ children, style }) {
  return (
    <SafeAreaView style={[styles.screen, style]}>
-      <View style={style}>{children}</View>
+      <StatusBar barStyle={"dark-content"} />
+      <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>


ndedhia1210 · 2023-05-24T23:40:25Z

app/views/screens/LoginScreen.js

-  function authenticate() {
-    authContext.setUser({});
-  }
+  const keyboardVerticalOffset = Platform.OS === "ios" ? 20 : 0;


+1 for thinking about this behavior.

ndedhia1210 · 2023-06-04T21:15:08Z

App.js

+  function renderSwitch() {
+    switch (appStatus) {
+      case AsyncStatus.Succeeded:
+        return <>{user ? <AppNavigator /> : <AuthNavigator />}</>;


<></> i not required can be skipped.

ndedhia1210 · 2023-06-04T21:17:36Z

app/api/hooks/useApi.js

+
+  const request = async (...args) => {
+    setApiStatus(AsyncStatus.Loading);
+    const response = await apiFunc(...args);


Let’s use promises for this.

It is okay to address in next pr

Ok, will update that in next PR

I tried implementing the promise here just now but was facing some errors and the code started looking a little ugly. I would suggest we use async-await along with try-catch to handle all scenarios. With async-await, the code looks more maintainable and organized as compared to promise. I would like to hear your concerns about async-await. Let's discuss this during our sync up.

ndedhia1210 · 2023-06-04T21:20:05Z

app/config/settings.js

+};
+
+const getCurrentSettings = () => {
+  if (__DEV__) return settings.dev;


Where will we store this DEV does it mean from environment variable? Or from webpack?

DEV is a global variable from react native packager. It is set during runtime by react native and is available to use anywhere in the app for encapsulating environment specific code blocks.

swapnilkamat23 commented May 19, 2023

View reviewed changes

swapnilkamat23 force-pushed the swap/user-auth branch from 396bab7 to b6e14df Compare May 19, 2023 04:58

ndedhia1210 reviewed May 24, 2023

View reviewed changes

swapnilkamat23 force-pushed the swap/user-auth branch 3 times, most recently from b56f381 to 28cc16d Compare June 3, 2023 21:29

ndedhia1210 reviewed Jun 4, 2023

View reviewed changes

ndedhia1210 approved these changes Jun 4, 2023

View reviewed changes

Added authentication workflow

b21d07b

swapnilkamat23 force-pushed the swap/user-auth branch from 28cc16d to b21d07b Compare June 5, 2023 03:35

swapnilkamat23 merged commit 0014b18 into main Jun 5, 2023

swapnilkamat23 added the new feature New feature addition label Oct 16, 2023

swapnilkamat23 self-assigned this Oct 16, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds user authentication workflow #3

Adds user authentication workflow #3

swapnilkamat23 commented May 19, 2023 •

edited

Loading

swapnilkamat23 May 19, 2023

ndedhia1210 May 24, 2023

ndedhia1210 May 24, 2023

swapnilkamat23 Jun 3, 2023

ndedhia1210 May 24, 2023

swapnilkamat23 Jun 3, 2023

ndedhia1210 May 24, 2023

swapnilkamat23 Jun 3, 2023

ndedhia1210 May 24, 2023

swapnilkamat23 Jun 3, 2023

ndedhia1210 May 24, 2023

swapnilkamat23 Jun 3, 2023

ndedhia1210 May 24, 2023

ndedhia1210 May 24, 2023

ndedhia1210 Jun 4, 2023

swapnilkamat23 Jun 5, 2023

ndedhia1210 Jun 4, 2023

ndedhia1210 Jun 4, 2023

swapnilkamat23 Jun 5, 2023

swapnilkamat23 Jun 5, 2023

ndedhia1210 Jun 4, 2023

swapnilkamat23 Jun 5, 2023

		import { NavigationContainer } from "@react-navigation/native";
		import * as SplashScreen from "expo-splash-screen";

		const login = (username, password) =>
		client.post("/login", { username, password });


		import AsyncStorage from "@react-native-async-storage/async-storage";

		const storeData = async (key, value) => {

Adds user authentication workflow #3

Adds user authentication workflow #3

Conversation

swapnilkamat23 commented May 19, 2023 • edited Loading

This PR -

Coming up in next PR -

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Non-blocking comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

swapnilkamat23 commented May 19, 2023 •

edited

Loading