Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding Github Authentication Using Firebase #192

Merged
merged 2 commits into from
Jul 23, 2024
Merged

Adding Github Authentication Using Firebase #192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c636d9a
Adding Github Authentication Using Firebase
Ojas-Arora Jul 22, 2024
150fc51
Adding Github Authentication
Ojas-Arora Jul 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions app/Firebase/firebase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@

import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
import { getAuth, GoogleAuthProvider, GithubAuthProvider } from 'firebase/auth';

const firebaseConfig = {
apiKey: 'YOUR_API_KEY',
Expand All @@ -17,4 +16,7 @@ const app = initializeApp(firebaseConfig);
// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);

export { auth, GoogleAuthProvider };
// Initialize GitHub Auth Provider
const githubProvider = new GithubAuthProvider();

export { auth, GoogleAuthProvider, githubProvider };
22 changes: 18 additions & 4 deletions app/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import React, { useState } from "react";
import { useForm } from "react-hook-form";
import * as z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth";
import { auth } from "../Firebase/firebase"; // Assuming you have a firebaseConfig file
import { getAuth, GoogleAuthProvider, signInWithPopup, GithubAuthProvider } from "firebase/auth";
import { auth,githubProvider } from "../Firebase/firebase"; // Assuming you have a firebaseConfig file
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEye, faEyeSlash, faHouse } from '@fortawesome/free-solid-svg-icons';
import { useRouter } from 'next/navigation';
Expand Down Expand Up @@ -68,7 +68,15 @@ export default function SignInSignUp() {
console.error("Google Sign-In error:", error);
}
};

const handleGithubSignIn = async () => {
try {
const result = await signInWithPopup(auth, githubProvider);
const user = result.user;
console.log("GitHub Sign-In successful:", user);
} catch (error) {
console.error("GitHub Sign-In error:", error);
}
};
const handleOnClick = (text: string) => {
if (text !== type) {
setType(text);
Expand Down Expand Up @@ -415,6 +423,9 @@ export default function SignInSignUp() {
<a href="https://www.twitter.com" className="social">
<i className="fab fa-twitter"></i>
</a>
<a href="#" className="social" onClick={handleGithubSignIn}>
<i className="fab fa-github"></i>
</a>
</div>
<span>or use your email for registration</span>
<input
Expand Down Expand Up @@ -477,6 +488,9 @@ export default function SignInSignUp() {
<a href="https://www.twitter.com" className="social">
<i className="fab fa-twitter"></i>
</a>
<a href="#" className="social" onClick={handleGithubSignIn}>
<i className="fab fa-github"></i>
</a>
</div>
<span>or use your account</span>
<input
Expand Down Expand Up @@ -543,4 +557,4 @@ export default function SignInSignUp() {
</div>
</div>
);
}
}