[feat] created AuthContext #20

rachaelch3n · 2024-10-23T02:03:00Z

What's new in this PR 🧑‍🌾

Description

Implemented AuthContext to manage user authentication state
Added AuthProvider to wrap components and provide sign-in, sign-up, and sign-out functionality
Signing in reroutes to dashboard that confirms user is signed in, and users now have the option to sign out

Screenshots

How to review

Review the AuthProvider implementation in utils/AuthProvider.tsx
Test the login flow in LoginPage.tsx and ensure signUp and signIn work as expected
Test the Dashboard component in DashboardPage.tsx to verify it correctly displays user data (e.g., email) and handles the sign-out process

Next steps

Styling

Relevant links

Online sources

Related PRs

CC: @ccatherinetan

pragyakallanagoudar · 2024-10-23T04:59:48Z

package.json

@@ -14,9 +14,10 @@
    "pre-commit": "(pnpm run tsc || true) && (pnpm run lint || true) && pnpm run prettier"


cc @ccatherinetan, maybe we want to remove this change & also the package-lock.json change? (do we want/need this change)?

@pragyakallanagoudar what change are you referring to?

this comment is fully on the wrong line lol but i'm referring to the one on line 17/20 of this file

yes sg! we'll delete the @next/swc-darwin-arm64 line

ronniebeggs

Looking good so far! I left a few comments and I imagine @ccatherinetan will also want to review soon as well. Good job!

ronniebeggs · 2024-10-23T21:04:58Z

package-lock.json

@ccatherinetan It seems that devs may've accidentally used npm commands and now we have both npm and pnpm lock files. This may cause dependency issues in the future. I'd look into cleaning up the repository by deleting this package-lock.json file.

ronniebeggs · 2024-10-23T21:06:49Z

app/utils/AuthProvider.tsx

+
+// Define the shape of the context
+interface AuthContextType {
+  authUser: any;


Create an AuthUser type/interface that contains user profile related attributes. This will get rid of the eslint error.

The authUser attribute would likely have an AuthUser | null type.

ronniebeggs · 2024-10-23T21:17:40Z

app/utils/AuthProvider.tsx

+          setAuthUser(null);
+          setIsLoggedIn(false);


Consider when a logout event is sent from the server. This should redirect a user to the /login screen.

ronniebeggs · 2024-10-23T21:19:05Z

package.json

@@ -14,9 +14,10 @@
    "pre-commit": "(pnpm run tsc || true) && (pnpm run lint || true) && pnpm run prettier"


@pragyakallanagoudar what change are you referring to?

ronniebeggs · 2024-10-23T21:31:23Z

app/(auth)/login/page.tsx

+export default function LoginLayout() {
+  return (
+    <AuthProvider>
+      <Login />
+    </AuthProvider>
+  );
+}


You only need to wrap the layout.tsx file with the AuthProvider to give its child screens access to context data. It seems that an Auth context would need to wrap the entire app, so look into wrapping the root layout.tsx file with the auth provider.

+1! See outermost layout.tsx in IJP's codebase

ronniebeggs · 2024-10-23T22:50:47Z

app/dashboard/page.tsx

+        <p>User is currently: {isLoggedIn ? 'Logged In' : 'Logged Out'}</p>
+        {authUser && <p>User name: {authUser.email}</p>}{' '}
+        {/* Display user's email */}
+        <button onClick={signOut}>Log Out</button> {/* Logout button */}


Nitpick: it's better to have separate pages/flows for logged in/out users. However, this page looks like it'll be changed in the future, so keep this in mind when/if it does change.

pragyakallanagoudar

nice work @rachaelch3n ! have just left some comments / questions

pragyakallanagoudar · 2024-10-24T02:37:30Z

app/(auth)/login/page.tsx

+export default function LoginLayout() {
+  return (
+    <AuthProvider>
+      <Login />
+    </AuthProvider>
+  );
+}


+1! See outermost layout.tsx in IJP's codebase

pragyakallanagoudar · 2024-10-24T02:38:13Z

app/(auth)/login/layout.tsx

@@ -0,0 +1,5 @@
+import { AuthProvider } from '../../utils/AuthProvider';


You can probably get rid of this whole file when you move the <AuthProvider> wrap out to the outer layout.tsx.

pragyakallanagoudar · 2024-10-24T04:13:49Z

app/utils/AuthProvider.tsx

+
+// Define the shape of the context
+interface AuthContextType {
+  authUser: any;


@ronniebeggs curious if you have thoughts on whether storing the AuthUser object vs. the Session in the AuthContext would be better? i did the latter in ijp but tbh i have no idea why

…hboard

ccatherinetan

looking great! i added some more comments, esp about commenting out code and adjusting the AuthProvider to include the auth session as well as unpacking AuthUser

i'll try to take another look at it again soon!

ccatherinetan · 2024-10-30T04:46:46Z

app/dashboard/page.tsx

while this is a good test of using AuthProvider, we don't want a dashboard page yet, so let's delete this file.

You can leave the code in this file as a block comment in AuthProvider.tsx for example usage

ccatherinetan · 2024-10-30T04:47:07Z

app/utils.ts

let's delete this!

ccatherinetan · 2024-11-07T18:35:11Z

package-lock.json

this file should be deleted

ccatherinetan · 2024-11-12T07:56:42Z

app/utils/AuthProvider.tsx

+interface AuthUser {
+  id: string;
+  email: string;


we don't need to pack these together, we can directly have 2 states in AuthProvider (i.e. after line 40):

const [userId, setUserId] = useState<string | null>(null)
const [email, setEmail] = useState<string | null>(null)

ccatherinetan · 2024-11-12T07:57:05Z

app/utils/AuthProvider.tsx

+
+// AuthProvider component that wraps around your app or specific pages
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [authUser, setAuthUser] = useState<AuthUser | null>(null);


we should be using tracking session as well, see https://github.com/calblueprint/immigration-justice-project/blob/main/src/utils/AuthProvider.tsx

ccatherinetan · 2024-11-12T07:58:42Z

app/utils/AuthProvider.tsx

+
+  return (
+    <AuthContext.Provider value={value}>
+      {!loading ? children : <div>Loading...</div>}


let's remove this conditional check. we can do this !loading check on individual pages, but we don't want even the home page to display "Loading...". So these lines should look like

<AuthContext.Provider value={value}> {children} </AuthContext.Provider>

ccatherinetan · 2024-11-12T08:00:19Z

app/utils/AuthProvider.tsx

+
+      setAuthUser(user);
+      setIsLoggedIn(true);
+      push('/dashboard'); // Redirect to dashboard after sign-in


the redirecting should be moved to /login. The functions in AuthProvider should only handle the supabase calls and updating the AuthContext. All additional logic/processing should happen within the respective page

ccatherinetan · 2024-11-12T08:00:41Z

app/utils/AuthProvider.tsx

+      if (error) throw new Error(error.message);
+      setAuthUser(null);
+      setIsLoggedIn(false);
+      push('/login'); // Redirect to login after sign-out


flagging that this routing shouldn't be here

also to clarify, we're not using signOut anywhere yet right?

ccatherinetan · 2024-11-12T08:03:16Z

app/utils/AuthProvider.tsx

+
+        setAuthUser(user);
+        setIsLoggedIn(true);
+        push('/dashboard'); // Redirect to dashboard after sign-up


the redirecting should be moved to /signup. The functions in AuthProvider should only handle the supabase calls and updating the AuthContext. All additional logic/processing should happen within the respective page

also, since /dashboard is a test page that will be deleted, we should nav to '/' instead (i.e. the home page)

…pages

…d pushes to respective pages

Created AuthContext with useAuth hook to manage user authentication

d2c8b96

pragyakallanagoudar reviewed Oct 23, 2024

View reviewed changes

ronniebeggs requested changes Oct 23, 2024

View reviewed changes

pragyakallanagoudar reviewed Oct 24, 2024

View reviewed changes

ccatherinetan linked an issue Oct 26, 2024 that may be closed by this pull request

Create Auth Context #8

Open

rachaelch3n and others added 13 commits October 26, 2024 12:48

wrap app with AuthProvider and introduce AuthUser interface

3e7cacf

separated login and signup pages

10cc0fc

fixed type errors on authcontext

b02515d

Update pnpm-lock.yaml after installing dependencies

d76ae9e

removed loading from dependancy array to get rid of flickering in das…

1e13530

…hboard

Created AuthContext with useAuth hook to manage user authentication

088ed77

wrap app with AuthProvider and introduce AuthUser interface

0d4d431

separated login and signup pages

d6f162a

fixed type errors on authcontext

594ad58

Update pnpm-lock.yaml after installing dependencies

3a7501c

removed loading from dependancy array to get rid of flickering in das…

e578a4d

…hboard

move AuthProvider wrapper to app/layout

958de99

prettier fix

1beb0f8

ccatherinetan force-pushed the rachaelchen/tg-8-create-auth-context branch from 1e13530 to 1beb0f8 Compare November 8, 2024 21:54

ccatherinetan reviewed Nov 12, 2024

View reviewed changes

rachaelch3n added 2 commits November 17, 2024 15:05

created 2 states, added tracking session, moved pushes to respective …

993d3c8

…pages

commented out dashboard, created 2 states, used trackin session, move…

5050894

…d pushes to respective pages

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[feat] created AuthContext #20

[feat] created AuthContext #20

rachaelch3n commented Oct 23, 2024

pragyakallanagoudar Oct 23, 2024

ronniebeggs Oct 23, 2024

pragyakallanagoudar Oct 24, 2024

ccatherinetan Oct 26, 2024

ronniebeggs left a comment

ronniebeggs Oct 23, 2024

ronniebeggs Oct 23, 2024

ronniebeggs Oct 23, 2024

ronniebeggs Oct 23, 2024

ronniebeggs Oct 23, 2024

ronniebeggs Oct 23, 2024

pragyakallanagoudar Oct 24, 2024

ronniebeggs Oct 23, 2024

pragyakallanagoudar left a comment

pragyakallanagoudar Oct 24, 2024

pragyakallanagoudar Oct 24, 2024

pragyakallanagoudar Oct 24, 2024

ccatherinetan left a comment

ccatherinetan Oct 30, 2024

ccatherinetan Oct 30, 2024

ccatherinetan Nov 7, 2024

ccatherinetan Nov 12, 2024

ccatherinetan Nov 12, 2024

ccatherinetan Nov 12, 2024

ccatherinetan Nov 12, 2024

ccatherinetan Nov 12, 2024

ccatherinetan Nov 12, 2024

		@@ -14,9 +14,10 @@
		"pre-commit": "(pnpm run tsc \|\| true) && (pnpm run lint \|\| true) && pnpm run prettier"

		@@ -0,0 +1,5 @@
		import { AuthProvider } from '../../utils/AuthProvider';

[feat] created AuthContext #20

Are you sure you want to change the base?

[feat] created AuthContext #20

Conversation

rachaelch3n commented Oct 23, 2024

What's new in this PR 🧑‍🌾

Description

Screenshots

How to review

Next steps

Relevant links

Online sources

Related PRs

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

ronniebeggs left a 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

pragyakallanagoudar left a 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

ccatherinetan left a 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