search

Namit2111 / bible-verse-finder

https://bible-verse-finder.vercel.app
GNU General Public License v3.0
24 stars 32 forks source link

feat: Implement OAuth Login (Google, GitHub, and Apple) #57

Open JustinhSE opened 2 weeks ago

JustinhSE commented 2 weeks ago

Overview

We need to add OAuth-based login functionality to our Next.js application using Firebase Authentication. This will allow users to sign in using their Google, GitHub, or Apple(optional) accounts. We'll add a "Sign In" button in the top right corner of the navbar, which will redirect users to a /login page when clicked.

Tasks

  1. Enable OAuth providers in Firebase

    • [ ] Configure Google Sign-In
    • [ ] Set up GitHub authentication
    • [ ] Configure Sign In with Apple (optional)

  2. Implement login UI

    • [ ] Add "Sign In" button to navbar
    • [ ] Create /login page with provider buttons
    • [ ] Style login page for consistency with app design

  3. Implement authentication logic

    • [ ] Create authentication context for managing user state
    • [ ] Implement sign-in functions for each provider
    • [ ] Handle authentication state changes
    • [ ] Implement sign-out functionality

  4. Update navbar

    • [ ] Add conditional rendering for sign-in/sign-out button
    • [ ] Implement redirect to /login on sign-in button click

  5. Handle user data

    • [ ] Store user info uid in Firestore and method of signing in (as a string)

Error handling and feedback

Megha30501 commented 2 weeks ago

Hey @JustinhSE, I am interested in working on this issue. However, I am going to need some clarification.

JustinhSE commented 2 weeks ago

Yea for sure! #63 i Will finish in a few minutes and then I can give you more info!

Megha30501 commented 2 weeks ago

Sure

JustinhSE commented 2 weeks ago

just merged #63 , what clarification do you need? firebase.tsx is in components/ by the way

Megha30501 commented 2 weeks ago
  1. Are you planning to write auth code directly in Frontend?
  2. If it is in the backend then using which language?
JustinhSE commented 2 weeks ago

@Megha30501 1) yes it is located in components/firebase.tsx for the frontend. For now just stick to google and github logins btw.

Megha30501 commented 2 weeks ago

Sure. You can assign this task to me!

Megha30501 commented 2 weeks ago

Is there a way for me to communicate with you directly?

JustinhSE commented 2 weeks ago

https://discord.gg/hacktoberfest and navigate to the Bible verse finder forum