#340 add authentication pages using firebase UI #346

detautama · 2024-05-21T21:27:48Z

Description

Implement authentication for the Tanam web application using firebaseui-web. The authentication should only support sign-in with Google. The site should be accessible only if the user is signed in, and upon successful sign-in, the user should be redirected to the landing page.

Requirements

🛑 FirebaseUI Implementation: I think we don't need this. We can create sign in ui by ourself

Access Control

✅ Ensure the site is accessible only to authenticated users.
✅ Redirect unauthenticated users to the sign-in page.

Post-Sign-In Redirection

✅ Redirect signed-in users to the landing page.

Referenced issues

Closes #340

muzanella11 · 2024-05-22T01:01:30Z

hosting/libs/firebase/auth.ts

+    }
+    return result.user.uid;
+  } catch (error) {
+    console.error("Error signing in with Google", error);


It would be better if we could display information to the user with a popup message when an error occurs and display an error message in the browser console just for developer debugging.
So the user can find out whether the process was a success or an error

Suggested change

console.error("Error signing in with Google", error);

Snackbar.error(new Error('Login failed'))

console.error(error);

Whenever possible, make an error service that wrap the error UI behavior and console log, so that we only call one method and can do customization in one place.

Updated in this commit

Image example on error handling ⬇️

hosting/libs/firebase/auth.ts

muzanella11 · 2024-05-22T01:05:32Z

hosting/libs/firebase/auth.ts

+  try {
+    await firebaseAuth.signOut();
+  } catch (error) {
+    console.error("Error signing out with Google", error);


It would be better if we could handle this error condition and show some message to user with snackbar

Yes, that would be helpful. Just avoid putting the details of the message from the error in snackbar. The current console.error is good as it is. But it would indeed be helpful to get a snackbar informing that something went wrong.

Updated in this commit

Image example on error handling ⬇️

muzanella11 · 2024-05-22T01:06:36Z

hosting/libs/firebase/config.ts

+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+};
+
+const firebaseApp =


We can optimizing this line code

Suggested change

const firebaseApp =

const firebaseApp = initializeApp(firebaseConfig)

What about the way it's implemented in the docs of Firebase Frameworks Hosting

// get the authenticated Firebase App const firebaseApp = getApp(useRouter().query.__firebaseAppName);

@DennisAlund I got this error with your solution

Argument of type 'string | string[] | undefined' is not assignable to parameter of type 'string | undefined'.

I will go with @muzanella11 solution. Updated on this commit

muzanella11 · 2024-05-22T01:12:54Z

hosting/src/app/auth/signup/_components/SignUpWithGoogle.tsx

+import { createSession } from "../../../../../actions/auth-action";
+import { signInWithGoogle } from "../../../../../libs/firebase/auth";


Long and messy import. It would be better to use path alias

Updated in this commit

muzanella11 · 2024-05-22T01:13:45Z

hosting/src/components/Header/DropdownUser/DropdownUser.tsx

+import { SignOutWithGoogle } from "./components/SignOutWithGoogle";
+import { firebaseAuth } from "../../../../libs/firebase/config";


Long and messy import. It would be better to use path alias

Updated in this commit

muzanella11 · 2024-05-22T01:14:17Z

hosting/src/components/Header/DropdownUser/components/SignOutWithGoogle.tsx

+import { removeSession } from "../../../../../actions/auth-action";
+import { signOutWithGoogle } from "../../../../../libs/firebase/auth";


Long and messy import. It would be better to use path alias

Updated in this commit

muzanella11 · 2024-05-22T01:35:52Z

hosting/src/components/Header/index.tsx

 import DarkModeSwitcher from "./DarkModeSwitcher";
 import DropdownMessage from "./DropdownMessage";
 import DropdownNotification from "./DropdownNotification";
-import DropdownUser from "./DropdownUser";
+import DropdownUser from "./DropdownUser/DropdownUser";


It would be better to use path alias

Updated in this commit

muzanella11 · 2024-05-22T01:36:12Z

hosting/src/components/Layouts/DefaultLayout.tsx

+import React, { useEffect, useState } from "react";
 import Sidebar from "@/components/Sidebar";
 import Header from "@/components/Header";
+import Loader from "../common/Loader";


Long and messy import. It would be better to use path alias

Updated in this commit

DennisAlund

This implementation doesn't look like what I expected from using FirebaseUI: https://firebase.google.com/docs/auth/web/firebaseui

Is there a reason for doing manual buttons and handling?

DennisAlund · 2024-05-22T01:47:35Z

hosting/libs/firebase/config.ts

+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+};
+
+const firebaseApp =


What about the way it's implemented in the docs of Firebase Frameworks Hosting

// get the authenticated Firebase App const firebaseApp = getApp(useRouter().query.__firebaseAppName);

hosting/src/components/Header/DropdownUser/DropdownUser.tsx

DennisAlund · 2024-05-22T01:54:07Z

hosting/src/components/Layouts/DefaultLayout.tsx

+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    setTimeout(() => setLoading(false), 2000);


I am assuming this loading part is implemented as a placeholder to show usage for later when we are loading data from Firestore?

Please consider either of the following options

Add a comment such as // Fetch your data here and set loading to false when done

Remove the loading things until we're loading data

I choose number 1
Updated in this commit

…s://github.com/oddbit/tanam into #340-Add-Authentication-Pages-using-FirebaseUI

detautama · 2024-05-22T14:19:22Z

This implementation doesn't look like what I expected from using FirebaseUI: https://firebase.google.com/docs/auth/web/firebaseui

Is there a reason for doing manual buttons and handling?

We already have it all: A page to show sign in button and a button to sign in with google account, that's a reason. I didn't find any reason to use firebaseUI. Or are there something that I missed from FirebaseUI?

…Authentication-Pages-using-FirebaseUI

# Conflicts: # hosting/src/app/auth/signin/page.tsx # hosting/src/app/auth/signup/page.tsx # hosting/src/app/layout.tsx # hosting/src/components/Header/DropdownUser/DropdownUser.tsx # hosting/src/components/Header/index.tsx # hosting/src/components/Layouts/DefaultLayout.tsx # hosting/src/components/Maps/MapOne.tsx # hosting/src/firebase.ts

DennisAlund · 2024-05-23T05:28:26Z

hosting/src/hooks/use-user-session.ts

Hook files should be camelCase. Please rename this one to useUserSession.tsx

DennisAlund · 2024-05-23T05:30:09Z

hosting/src/libs/firebase/auth.ts

I suppose this one won't be needed if we are using Firebase UI for auth? 🙏

DennisAlund · 2024-05-23T05:32:03Z

hosting/src/components/Header/DropdownUser/components/SignOutWithGoogle.tsx

+import {removeSession} from "@/actions/auth-action";
+import {signOutWithGoogle} from "@/libs/firebase/auth";
+
+export const SignOutWithGoogle = () => {


Could we rename the operation to just "sign out" since the sign out flow will be the same for all providers when we add more in the future.

DennisAlund · 2024-05-23T05:33:52Z

hosting/src/actions/auth-action.ts

What is the auth action in terms of Next terminology? Can you help me with a pointer to the docs for me to learn what pattern this is 🙏

github-actions · 2024-05-24T23:37:21Z

Visit the preview URL for this PR (updated for commit d4496a8):

https://tanam-testing--pr346-340-add-authenticat-2uc7akdn.web.app

_{(expires Fri, 31 May 2024 23:33:30 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 5bbe8a1a68d9684d656bffba10008fe532204561}

DennisAlund · 2024-05-27T03:57:49Z

Replaced by #354

detautama added 4 commits May 21, 2024 18:15

WIP feat: implement sign in with Google

ef08fc2

Remove session props

c48cefc

chore: Update sign in and sign up pages layout

8a480cd

feat: update profile image and name based on current user

43f4314

detautama requested review from DennisAlund, muzanella11 and aibnukamal May 21, 2024 21:30

detaoddbit self-assigned this May 22, 2024

muzanella11 requested changes May 22, 2024

View reviewed changes

Update firebase-hosting-pull-request.yml

8b0afbe

DennisAlund requested changes May 22, 2024

View reviewed changes

detautama linked an issue May 22, 2024 that may be closed by this pull request

Add Authentication Pages using FirebaseUI #340

Closed

detautama added 8 commits May 22, 2024 20:05

chore: Update import paths to use alias @

4cb9887

Merge branch '#340-Add-Authentication-Pages-using-FirebaseUI' of http…

7ddce9e

…s://github.com/oddbit/tanam into #340-Add-Authentication-Pages-using-FirebaseUI

chore: Update import path for onAuthStateChanged in use-user-session.ts

7b9fec7

chore: Update import paths to use alias @

02652cd

chore: Remove firebase.ts file

cbdf801

feat: Add Error component for displaying error messages

184df70

chore: Update firebase import in config.ts

9961daf

add comment for replace timeout with actual data fetching

29151aa

Merge branch 'next' of https://github.com/oddbit/tanam into #340-Add-…

b9b8796

…Authentication-Pages-using-FirebaseUI

detautama assigned detautama and unassigned detaoddbit May 22, 2024

DennisAlund added 2 commits May 23, 2024 13:10

Removing auth things

97ab92d

DennisAlund requested changes May 23, 2024

View reviewed changes

DennisAlund and others added 2 commits May 24, 2024 10:43

Merge branch 'next' into #340-Add-Authentication-Pages-using-FirebaseUI

65d70a8

fix wrong path component

d4496a8

DennisAlund closed this May 27, 2024

muzanella11 mentioned this pull request May 27, 2024

feat: authentication user #354

Merged

DennisAlund deleted the #340-Add-Authentication-Pages-using-FirebaseUI branch May 27, 2024 08:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#340 add authentication pages using firebase UI #346

#340 add authentication pages using firebase UI #346

detautama commented May 21, 2024

muzanella11 May 22, 2024

anandaprabawa May 22, 2024

detautama May 22, 2024

muzanella11 May 22, 2024

DennisAlund May 22, 2024

detautama May 22, 2024

muzanella11 May 22, 2024

DennisAlund May 22, 2024

detautama May 22, 2024

detautama May 22, 2024

muzanella11 May 22, 2024

detautama May 22, 2024

muzanella11 May 22, 2024

detautama May 22, 2024

muzanella11 May 22, 2024

detautama May 22, 2024

muzanella11 May 22, 2024

detautama May 22, 2024

muzanella11 May 22, 2024

detautama May 22, 2024

DennisAlund left a comment

DennisAlund May 22, 2024

DennisAlund May 22, 2024

detautama May 22, 2024

detautama commented May 22, 2024

DennisAlund May 23, 2024

DennisAlund May 23, 2024

DennisAlund May 23, 2024

DennisAlund May 23, 2024

github-actions bot commented May 24, 2024

DennisAlund commented May 27, 2024

	console.error("Error signing in with Google", error);
	Snackbar.error(new Error('Login failed'))
	console.error(error);

	const firebaseApp =
	const firebaseApp = initializeApp(firebaseConfig)

		import { createSession } from "../../../../../actions/auth-action";
		import { signInWithGoogle } from "../../../../../libs/firebase/auth";

		import { SignOutWithGoogle } from "./components/SignOutWithGoogle";
		import { firebaseAuth } from "../../../../libs/firebase/config";

		import { removeSession } from "../../../../../actions/auth-action";
		import { signOutWithGoogle } from "../../../../../libs/firebase/auth";

#340 add authentication pages using firebase UI #346

#340 add authentication pages using firebase UI #346

Conversation

detautama commented May 21, 2024

Description

Requirements

Access Control

Post-Sign-In Redirection

Referenced issues

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

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

DennisAlund 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

detautama commented May 22, 2024

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

github-actions bot commented May 24, 2024

DennisAlund commented May 27, 2024