diff --git a/contexts/authContext.js b/contexts/authContext.js new file mode 100644 index 0000000..7623496 --- /dev/null +++ b/contexts/authContext.js @@ -0,0 +1,83 @@ +import { getAuth, GoogleAuthProvider, onAuthStateChanged, signInWithPopup, User } from "firebase/auth"; +import React, { useContext, useEffect, useState } from "react"; +import { useRouter } from 'next/router' +import firebase from '../services/firebase' + +const AuthContext = React.createContext(null); +const googleProvider = new GoogleAuthProvider() + +const auth = getAuth(); + +export function AuthProvider({ children }) { + const [currUser, setCurrUser] = useState(null); + const [loading, setLoading] = useState(true) + + const router = useRouter() + + useEffect(() => { + const unsubscribe = onAuthStateChanged(auth, user => { + setLoading(false) + + console.log(user) + + // will be null or the firebase logged in user + setCurrUser(user) + }); + + return unsubscribe + }, []) + + const signInGoogle = () => { + signInWithPopup(auth, googleProvider).then((res) => { + // This gives you a Google Access Token. You can use it to access the Google API. + const credential = GoogleAuthProvider.credentialFromResult(result); + const token = credential.accessToken; + // The signed-in user info. + const user = result.user; + + setCurrUser(user) + + console.log(user) + }).catch((error) => { + // Handle Errors here. + const errorCode = error.code; + const errorMessage = error.message; + // The email of the user's account used. + const email = error.email; + // The AuthCredential type that was used. + const credential = GoogleAuthProvider.credentialFromError(error); + console.log(error) + }) + } + + const signOut = () => { + console.log('logging user out') + + signOut(auth).then(() => { + // Sign-out successful. + console.log("signed out fine, redirecting to proper place") + + router.push('/') + }).catch((error) => { + // An error happened. + console.log(error) + }); + } + + const value = { + currUser, + signInGoogle, + signOut + } + + return ( + + {!loading && children} + + ) +} + +// custom hook to use the authUserContext and access currUser +export function useAuth() { + return useContext(AuthContext) +} \ No newline at end of file diff --git a/contexts/authContext.tsx b/contexts/authContext.tsx deleted file mode 100644 index 503a3ac..0000000 --- a/contexts/authContext.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { getAuth, onAuthStateChanged, User } from "firebase/auth"; -import React, { useContext, useEffect, useState } from "react"; - -const AuthContext = React.createContext(null); - -export function useAuth() { - return useContext(AuthContext) -} - -export function AuthProvider({ children }) { - const [currUser, setCurrUser] = useState(null); - - function loginSignup() { - return - } - - useEffect(() => { - const unsubscribe = getAuth().onAuthStateChanged(user => { - // will be null or the firebase logged in user - setCurrUser(user) - }); - - return unsubscribe - }, []) - - - - const value = { - currUser - } - - return ( - - {children} - - ) -} \ No newline at end of file diff --git a/firebase/index.js b/firebase/index.js deleted file mode 100644 index 7365029..0000000 --- a/firebase/index.js +++ /dev/null @@ -1,25 +0,0 @@ -// Import the functions you need from the SDKs you need -import firebase from "firebase/app"; - -import { getAnalytics } from "firebase/analytics"; - -// TODO: Add SDKs for Firebase products that you want to use -// https://firebase.google.com/docs/web/setup#available-libraries - -// Your web app's Firebase configuration -// For Firebase JS SDK v7.20.0 and later, measurementId is optional -const firebaseConfig = { - apiKey: process.env.NEXT_PUBLIC_FIREBASE_APIKEY, - authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, - projectId: process.env.NEXT_PUBLIC_PROJECT_ID, - storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET, - messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID, - appId: process.env.NEXT_PUBLIC_APPID, - measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID -}; - -// Initialize Firebase -const app = firebase.initializeApp(firebaseConfig); -const analytics = getAnalytics(app); - -export default app; \ No newline at end of file diff --git a/pages/_app.js b/pages/_app.js index 789cfa4..faf4704 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,6 +1,7 @@ import '../styles/globals.css' import 'antd/dist/antd.css'; import Head from 'next/head' +import { AuthProvider } from '../contexts/authContext' function MyApp({ Component, pageProps }) { return <> @@ -32,7 +33,9 @@ function MyApp({ Component, pageProps }) {
- + + +
} diff --git a/pages/teams/dashboard.tsx b/pages/teams/dashboard.tsx new file mode 100644 index 0000000..3a7260e --- /dev/null +++ b/pages/teams/dashboard.tsx @@ -0,0 +1,25 @@ + +import { useRouter } from 'next/router' +import { useEffect } from 'react' + +import { useAuth } from '../../contexts/authContext' + +export default function Dashboard() { + const { currUser, signOut } = useAuth() + const router = useRouter() + + useEffect(() => { + // if not authed, go to home + if (!currUser) { + console.log('routing from dashboard to teams home') + router.push('/teams') + } + }, []) + + return ( +
+

This is the dashboard

+ +
+ ) +} \ No newline at end of file diff --git a/pages/teams/index.js b/pages/teams/index.js index 4db3c4f..c5fe90a 100644 --- a/pages/teams/index.js +++ b/pages/teams/index.js @@ -1,6 +1,7 @@ import Head from 'next/head'; import Image from 'next/image'; import styles from '/styles/Home.module.css'; +import Link from 'next/link'; export default function Home() { return ( @@ -70,6 +71,10 @@ export default function Home() {

why? we live in a distracted world. let's fix it, because less is more.

+ + + + ); diff --git a/pages/teams/login.tsx b/pages/teams/login.tsx index ac098c3..9f7cca5 100644 --- a/pages/teams/login.tsx +++ b/pages/teams/login.tsx @@ -1,13 +1,28 @@ +import { useRouter } from 'next/router' +import { useEffect } from 'react'; import {FaGoogle} from "react-icons/fa"; +import { useAuth } from '../../contexts/authContext' export default function Login() { + const { currUser, signInGoogle } = useAuth() + const router = useRouter() + + useEffect(() => { + // if auth, go to dashboard + if (currUser) { + console.log('already logged in, redirecting to the dashboard') + router.push('/teams/dashboard') + } + }, [currUser]) + return (
- - + + {JSON.stringify(currUser?.email)}
) } \ No newline at end of file diff --git a/services/firebase.js b/services/firebase.js new file mode 100644 index 0000000..9ab9b08 --- /dev/null +++ b/services/firebase.js @@ -0,0 +1,33 @@ + +// const firebaseConfig = { +// apiKey: process.env.NEXT_PUBLIC_FIREBASE_APIKEY, +// authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, +// projectId: process.env.NEXT_PUBLIC_PROJECT_ID, +// storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET, +// messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID, +// appId: process.env.NEXT_PUBLIC_APPID, +// measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID +// }; + + +// Import the functions you need from the SDKs you need +import { initializeApp } from "firebase/app"; +import { getAnalytics } from "firebase/analytics"; +// TODO: Add SDKs for Firebase products that you want to use +// https://firebase.google.com/docs/web/setup#available-libraries + +// Your web app's Firebase configuration +// For Firebase JS SDK v7.20.0 and later, measurementId is optional +const firebaseConfig = { + apiKey: "AIzaSyAr3iEcoduqDv0IW9czwmt3Yqp5StZED0w", + authDomain: "nirvana-for-business.firebaseapp.com", + projectId: "nirvana-for-business", + storageBucket: "nirvana-for-business.appspot.com", + messagingSenderId: "825654222284", + appId: "1:825654222284:web:0778c8883de21917b51169", + measurementId: "G-MB5G7G09MR" +}; + +// Initialize Firebase +const app = initializeApp(firebaseConfig); +const analytics = getAnalytics(app); \ No newline at end of file