auth almost done

components/Header.js

@@ -1,12 +1,32 @@
-import React from "react";
+import React, { useState } from "react";
 
 // material design
 import { Button } from "@material-ui/core";
 
 // link from next
 import Link from "next/link";
 
-const Header = ({ setOpen }) => {
+import Menu from "@material-ui/core/Menu";
+import { auth } from "../utils/firebase";
+import toast from "react-hot-toast";
+
+const Header = ({ setOpen, user, setUser }) => {
+ const [anchorEl, setAnchorEl] = useState(null);
+
+ const signOut = () => {
+ auth()
+ .signOut()
+ .then(() => {
+ setUser(null);
+ toast.success("Signed Out from Codehouse!");
+ })
+ .catch((error) => {
+ // An error happened.
+ console.log(error);
+ });
+ setAnchorEl(null);
+ };
+
  return (
  <div className="w-full px-4 py-3 glassmorphism flex justify-between items-center">
  <Link href="/">
@@ -35,14 +55,57 @@ const Header = ({ setOpen }) => {
  New CheetSheet
  </div>
  </Button>
- <Button
- className="!p-0 !w-auto !h-auto !m-auto shine !ml-2"
- onClick={() => setOpen(true)}
- >
- <div className="bg-[#F5BA31] px-4 py-[6px] text-md capitalize rounded-md font-semibold flex items-center justify-center">
- Sign In
- </div>
- </Button>
+ {user ? (
+ <>
+ <Button
+ className="!p-0 !w-auto !h-auto !m-auto !ml-2"
+ onClick={(e) => setAnchorEl(e.currentTarget)}
+ >
+ <div className="bg-[#F5BA31] p-[6px] text-md capitalize rounded-md font-semibold flex items-center justify-center">
+ <img
+ src="https://avatars.githubusercontent.com/u/61895712?v=4"
+ alt=""
+ className="h-7 w-7 rounded-md mr-1"
+ />
+ Savio Martin
+ </div>
+ </Button>
+ <Menu
+ getContentAnchorEl={null}
+ className="!mt-1"
+ anchorOrigin={{
+ vertical: "bottom",
+ horizontal: "right",
+ }}
+ transformOrigin={{
+ vertical: "top",
+ horizontal: "right",
+ }}
+ keepMounted
+ anchorEl={anchorEl}
+ open={Boolean(anchorEl)}
+ onClose={() => setAnchorEl(null)}
+ >
+ <Button
+ className="!p-0 !w-auto !h-auto !m-auto"
+ onClick={signOut}
+ >
+ <div className="px-4 py-[6px] text-md capitalize rounded-md font-semibold flex items-center justify-center hover:text-red-500 duration-500">
+ Sign Out
+ </div>
+ </Button>
+ </Menu>
+ </>
+ ) : (
+ <Button
+ className="!p-0 !w-auto !h-auto !m-auto shine !ml-2"
+ onClick={() => setOpen(true)}
+ >
+ <div className="bg-[#F5BA31] px-4 py-[6px] text-md capitalize rounded-md font-semibold flex items-center justify-center">
+ Sign In
+ </div>
+ </Button>
+ )}
  </div>
  </div>
  );

components/Hero.js

@@ -10,11 +10,11 @@ import { FiGithub } from "react-icons/fi";
 // components
 import { Header } from ".";
 
-const Hero = ({ setOpen }) => {
+const Hero = ({ setOpen, user, setUser }) => {
  //TODO: Dynamic Star Count
  return (
  <div className="h-screen bg-image w-full text-[#ECF2F5] overflow-visible">
- <Header setOpen={setOpen} />
+ <Header setOpen={setOpen} user={user} setUser={setUser} />
  <div className="flex items-center justify-center bg-image h-[90vh] w-full">
  <div className="w-7/12 h-full flex items-start justify-center flex-col pl-10">
  <h3 className="text-lg bg-text-gradient font-bold mb-3 uppercase tracking-wider">

components/SignInPopup.js

@@ -4,8 +4,15 @@ import Backdrop from "@material-ui/core/Backdrop";
 import Fade from "@material-ui/core/Fade";
 import { Btn } from ".";
 import { FaGithub, FaGoogle } from "react-icons/fa";
+import { githubProvider, googleProvider } from "../utils/Auth/auth-methods";
+import socialMediaAuth from "../utils/Auth/auth";
 
 const SignInPopup = ({ open, setOpen }) => {
+ const handleOnClick = async (provider) => {
+ const res = await socialMediaAuth(provider);
+ await setOpen(false);
+ };
+
  return (
  <Modal
  open={open}
@@ -28,15 +35,15 @@ const SignInPopup = ({ open, setOpen }) => {
  <Btn>
  <button
  className="bg-[#4385F4] border border-[#4385F4] text-white font-semibold py-2 px-4 rounded focus:outline-none focus:shadow-outline shine flex items-center"
- onClick={() => setCount(count + 20)}
+ onClick={() => handleOnClick(googleProvider)}
  >
  Sign In with Google <FaGoogle className="text-xl ml-1 -mr-1" />
  </button>
  </Btn>
  <Btn className="ml-1">
  <button
  className="bg-[#333] border border-[#333] text-white font-semibold py-2 px-4 rounded focus:outline-none focus:shadow-outline shine flex items-center"
- onClick={() => setCount(count + 20)}
+ onClick={() => handleOnClick(githubProvider)}
  >
  Sign In with Github
  <FaGithub className="text-2xl ml-1 -mt-1 -mr-1" />

package.json

@@ -10,6 +10,7 @@
  "dependencies": {
  "@material-ui/core": "^4.11.4",
  "axios": "^0.21.1",
+ "dotenv": "^10.0.0",
  "firebase": "^8.6.5",
  "next": "latest",
  "react": "^17.0.1",

pages/_app.js

@@ -3,13 +3,30 @@ import { Toaster } from "react-hot-toast";
 import "tailwindcss/tailwind.css"; // tailwind jit
 import { SignInPopup } from "../components";
 import "../styles/App.css"; // custom styles
+import { auth } from "../utils/firebase";
 
 function MyApp({ Component, pageProps }) {
  const [darkMode, setDarkMode] = useState(false);
  const [listView, setListView] = useState(false);
- const [open, setOpen] = useState(true);
+ const [open, setOpen] = useState(false);
+ const [user, setUser] = useState([]);
 
- const props = { darkMode, setDarkMode, listView, setListView, open, setOpen };
+ const props = {
+ darkMode,
+ setDarkMode,
+ listView,
+ setListView,
+ open,
+ setOpen,
+ user,
+ setUser,
+ };
+
+ auth().onAuthStateChanged((user) => {
+ if (user) {
+ setUser(user);
+ }
+ });
 
  return (
  <div className={`${darkMode ? "dark" : "light"} min-h-screen`}>

utils/Auth/auth-methods.js

@@ -1,5 +1,5 @@
 import { auth } from "../firebase";
 
 export const googleProvider = new auth.GoogleAuthProvider();
-// export const githubProvider = new auth.GithubAuthProvider(); TODO:
+export const githubProvider = new auth.GithubAuthProvider();
 // export const facebookProvider = new auth.FacebookAuthProvider(); TODO:

utils/Auth/auth.js

@@ -1,7 +1,7 @@
 import { auth } from "../firebase";
 
 const socialMediaAuth = (provider) => {
- auth
+ auth()
  .signInWithPopup(provider)
  .then((res) => {
  return res.user;

utils/firebase.js

@@ -1,7 +1,4 @@
 import firebase from "firebase";
-import dotenv from "dotenv";
-
-dotenv.config();
 
 const firebaseConfig = {
  apiKey: "AIzaSyBTH2-7uJKbjZ8slbPxaxny5MreXT-djhA",
@@ -13,10 +10,13 @@ const firebaseConfig = {
  measurementId: "G-X6FCVKT31X",
 };
 
-firebase.initializeApp(firebaseConfig);
+if (!firebase.apps.length) {
+ firebase.initializeApp(firebaseConfig);
+} else {
+ firebase.app(); // if already initialized, use that one
+}
 
-const auth = firebase.auth();
+const auth = firebase.auth;
 const db = firebase.firestore();
-firebase.analytics();
 
 export { db, auth };