[Feature] Implement user auth system using firebase

[ArnabChatterjee20k]

We are implementing our event management system so user auth will play a vital role.

Tasks

• [ ] Use firebase auth to implement a user auth
• [ ] Show the profile picture of the registered user on the navbar

Guidelines

• Code quality matters
• Implement both email & password and google auth
• Attach a video or video link showing the proper working of the auth system

[ShrutiKolla]

@ArnabChatterjee20k Can I work on this? Can you please assign me?

[ArnabChatterjee20k]

I am assigning this issue to @ShrutiKolla Keep updating us within every 3days

[ShrutiKolla]

@ArnabChatterjee20k Okk.

[ShrutiKolla]

@ArnabChatterjee20k I'll have to create the login and sign in pages too?

[ArnabChatterjee20k]

Create a single page and a form component Then for login and register swap the components Include signin with google as well in the form

If you are facing any confusion you can write here but keep updating us

[ShrutiKolla]

@ArnabChatterjee20k On login and register with email and password, how will I show the user profile image on navbar? I can do that with google sign-in. And is there also going to be google sign-up? And also, what is the difference between log-in and sign-in. They're the same right?

[ArnabChatterjee20k]

In google oauth we get all the profile picture details. So no issue in that case

Cant we do in this way? Prompting the user to enter their first and last name as well in the manual sign-up. When the signup is successfull without any errors register the user in the firestore as well with corresponding uid given by the auth. What will be the advantage? We can use the first and last name to create avatars. Avatar ui component

Create a collection named user-manual-signin data , store the following info

• uid of the user returned by firebaseauth
• first name
• last name

We can do this process even with firebase functions but it will be a bit complex. Implement the process in this way.

[ShrutiKolla]

@ArnabChatterjee20k Cool. I will use firebase functions. Will try to implement this. Will keep you updated. One more doubt I had. There's a component in the middle of the landing page: "Let's build Together" for Signing Up. After clicking Get Started, I can direct the user to enter the other details. Like the first name and last name and the password?

[ArnabChatterjee20k]

@ShrutiKolla dont use firebase functions for now. The things will get hard to maintain for now. Use the combination of auth and firestore.

[ArnabChatterjee20k]

@ShrutiKolla That lets build together is for newsletter service. Means whenever an event will be created, subscribed user will get the email notification. Event without registration. I am planning to implement this using google sheets api and custom backend. As firebase functions are paid.

[ShrutiKolla]

@ArnabChatterjee20k oh, ok. My bad

[ShrutiKolla]

@ArnabChatterjee20k I have created a separate component for home, so that we can navigate to different pages. I'm also using BrowserRouter.

[ArnabChatterjee20k]

Sure no issue But keep this flow If the user is not registered still he will be able to access the home. The auth system is basically for the events registration. Events is going to add in some days

[ShrutiKolla]

@ArnabChatterjee20k I'm not able to install firebase using npm i firebase. It's showing npm error

[ArnabChatterjee20k]

what's the error you are getting? if it is regarding peer dependency then use --legacy-peer-deps flag while installing

[ShrutiKolla]

@ArnabChatterjee20k I did but it's getting worse. Even npm i is showing conflicts. I'll try forking again.

[ArnabChatterjee20k]

@ArnabChatterjee20k I did but it's getting worse. Even npm i is showing conflicts. I'll try forking again.

Is it resolved now?

[ArnabChatterjee20k]

@ShrutiKolla any updates??

[widewipe]

Can I work on this issue? I'm pretty sure I can complete the first task of firebase auth system.

[ArnabChatterjee20k]

I am assigning the issue to @widewipe Please keep updating us

• If you face any problem, feel free to conduct a discussion or you can use this issue section as well

[widewipe]

Only email-password needs to be saved? (Other than google OAuth) Like, I don't need to save extra info like phone numbers, right?

[ArnabChatterjee20k]

Yes only email and password (in case of password login)

[ArnabChatterjee20k]

In google oauth we get all the profile picture details. So no issue in that case

Cant we do in this way? Prompting the user to enter their first and last name as well in the manual sign-up. When the signup is successfull without any errors register the user in the firestore as well with corresponding uid given by the auth. What will be the advantage? We can use the first and last name to create avatars. Avatar ui component

Create a collection named user-manual-signin data , store the following info

• uid of the user returned by firebaseauth
• first name
• last name

We can do this process even with firebase functions but it will be a bit complex. Implement the process in this way.

@widewipe follow this thread

[widewipe]

@ArnabChatterjee20k I can do this but it would take time as I've never implemented this before. If I run into any issues, I'll contact you

[ArnabChatterjee20k]

Yes sure take your time

[ArnabChatterjee20k]

@widewipe https://github.com/DevSoc-Asansol2023/DevSoc-Main/discussions/33#discussion-5761295 You can ask your doubts here in the discussion

[widewipe]

@ArnabChatterjee20k how should I create the signup and login pages? Can I create a folder 'pages' and add these pages there?

Also, I was thinking if I can put the main_page components into one single page component. This way, it will be easier when using react-router.

[widewipe]

@ArnabChatterjee20k I have finished the auth system and the navbar profile, with email and password.

Here's how it looks ;-

[ArnabChatterjee20k]

Can you share a video?

[ArnabChatterjee20k]

@ArnabChatterjee20k how should I create the signup and login pages? Can I create a folder 'pages' and add these pages there?

Also, I was thinking if I can put the main_page components into one single page component. This way, it will be easier when using react-router.

Yes you can do it. It will be actually better

[widewipe]

Can you share a video?

Here's a video

Screencast from 22-10-23 09:32:31 PM IST.webm

[ArnabChatterjee20k]

@widewipe Its awesome Some small fixes to be noted

• Make the form centered
• Remove the link Your Account Instead use the dropdown with the Avatar itself. By default You can keep the Your Account but after logged in change that to avatar otherwise the user will be confused. More better approach would be to keep a blank avatar by default instead of your account

But nice work Will be waiting to see the gauth part

[widewipe]

Okay, I'll do that

I was just testing for now, so didn't give much attention to the styling And the Your Account part seems tough :no_mouth: Will still try though :+1:

[ArnabChatterjee20k]

Okay, I'll do that

I was just testing for now, so didn't give much attention to the styling And the Your Account part seems tough 😶 Will still try though 👍

Your Account means the nav link that is present in the ui Just replace that

[widewipe]

For google auth, do I use the same logic for avatar or use the photoURL from google account?

[ArnabChatterjee20k]

Use the photo url

[widewipe]

I have completed the whole auth system, and I will get into styling the forms in a bit.

But I couldn't do the Your Account part properly. I have done it to some extent, but the styling is a bit glitched, with the navbar moving everytime the popup is open.

This is my first time using Tailwind, so its a bit difficult for me to use it properly.

Here is a video of the whole auth process :-

Screencast from 23-10-23 09:22:49 AM IST.webm

[ArnabChatterjee20k]

I have completed the whole auth system, and I will get into styling the forms in a bit.

But I couldn't do the Your Account part properly. I have done it to some extent, but the styling is a bit glitched, with the navbar moving everytime the popup is open.

This is my first time using Tailwind, so its a bit difficult for me to use it properly.

Here is a video of the whole auth process :-

Screencast.from.23-10-23.09.22.49.AM.IST.webm

Sure take your time. I think the problem is that when the avatar getting hovered it is taking some space. Let me know if you have any future queries

[widewipe]

Does this look okay?

[widewipe]

@ArnabChatterjee20k I have also done the Your Account part of the navbar, and I think its working nicely.

Here is a video of the same.

Screencast from 23-10-23 06:47:14 PM IST.webm

[ArnabChatterjee20k]

@ArnabChatterjee20k I have also done the Your Account part of the navbar, and I think its working nicely.

Here is a video of the same.

Screencast.from.23-10-23.06.47.14.PM.IST.webm

Its actually working great Thanks @widewipe for your valuable contribution

[widewipe]

@ArnabChatterjee20k Thanks for guiding me through this issue :pray:

I have made a PR for this, but its showing that the Checks have failed, but I don't know why. Also, can I share this work on my LinkedIn?

[ArnabChatterjee20k]

@ArnabChatterjee20k Thanks for guiding me through this issue 🙏

I have made a PR for this, but its showing that the Checks have failed, but I don't know why. Also, can I share this work on my LinkedIn?

@widewipe Definitely you can share your work on linkedin. Its your work and contribution and it's always available on github and it'a open to all. And ofcourse it's your craft and you can share

[ArnabChatterjee20k]

@ArnabChatterjee20k Thanks for guiding me through this issue 🙏

I have made a PR for this, but its showing that the Checks have failed, but I don't know why. Also, can I share this work on my LinkedIn?

I will take care of the checks. As I have integrated the netlify with this repo so a pipeline kinda thing is build on it. Means if you push any changes it will reflect and it will give me a auto preview of your work so that I can test it. May be some prod build issue is coming but yeah I will check it and will inform you

[widewipe]

@ArnabChatterjee20k I forgot to add environment variables the last time, so I commited the new version with that. The firebase project will be maintained by you, so it will be better if you give those env vars during the production.

Also, its now showing that the checks have passed. Of course, the preview is not working properly :sweat_smile:

[ArnabChatterjee20k]

@widewipe Ok I will provide you the configurations from the devsoc official firebase account. I will review the code tomorrow or day after tomorrow then before merging I will gvie you the config

[widewipe]

@ArnabChatterjee20k how much longer??

[ArnabChatterjee20k]

@ArnabChatterjee20k how much longer??

I actually got busy with some very important work Thanks for reminding. I will do it today only

[widewipe]

Ok ok, no worries 👍