From 5e87f013ed2461bd2cd6484dcae771b7e9ae6981 Mon Sep 17 00:00:00 2001 From: Sam Selikoff Date: Tue, 8 Sep 2020 15:06:56 -0400 Subject: [PATCH] basic auth --- package.json | 1 + pages/_app.js | 4 +- pages/login.js | 152 ++++++++++++++++++++++++++++++++++++ pages/work-journal-admin.js | 5 +- tailwind.config.js | 1 + yarn.lock | 48 +++++++++++- 6 files changed, 205 insertions(+), 6 deletions(-) create mode 100644 pages/login.js diff --git a/package.json b/package.json index cee8dd3..7485d2e 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@tailwindcss/ui": "^0.5.0", "date-fns": "^2.15.0", "firebase": "^7.19.0", + "formik": "^2.1.5", "gray-matter": "^4.0.2", "next": "^9.5.3-canary.25", "next-mdx-enhanced": "^4.0.0", diff --git a/pages/_app.js b/pages/_app.js index f9fd9b8..d98bee1 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -31,7 +31,7 @@ const Layout = ({ children }) => { return ( <> -
+
@@ -53,7 +53,7 @@ const Layout = ({ children }) => { />
-
{children}
+
{children}
); diff --git a/pages/login.js b/pages/login.js new file mode 100644 index 0000000..d72dcd2 --- /dev/null +++ b/pages/login.js @@ -0,0 +1,152 @@ +import { useEffect, useState } from "react"; +import { Formik, Field, Form } from "formik"; +import * as firebase from "firebase/app"; + +// Add the Firebase products that you want to use +import "firebase/auth"; + +export default function Login() { + let app; + let [state, setState] = useState("authenticating"); + + useEffect(() => { + let firebaseConfig = { + apiKey: "AIzaSyAXX4G4xSLAwfIgR8vOsgYQOq9or0Jmmyo", + authDomain: "test-3fb7f.firebaseapp.com", + databaseURL: "https://test-3fb7f.firebaseio.com", + projectId: "test-3fb7f", + storageBucket: "test-3fb7f.appspot.com", + messagingSenderId: "197704559138", + appId: "1:197704559138:web:f373ec99c0218a774ff87b", + measurementId: "G-HP7G1FS9FN", + }; + // Initialize Firebase + app = !firebase.apps.length + ? firebase.initializeApp(firebaseConfig) + : firebase.app(); + + app.auth().onAuthStateChanged(function (user) { + if (user) { + setState("authenticated"); + } else { + setState("anonymous"); + } + }); + }); + + function logout() { + firebase.auth().signOut(); + } + + return ( +
+
+

+ Sign in +

+
+ + {state === "authenticating" ? ( +

Checking auth status...

+ ) : state === "authenticated" ? ( +
+

Hi sam :)

+ +
+ ) : state === "anonymous" ? ( +
+
+ { + await app + .auth() + .signInWithEmailAndPassword(values.email, values.password); + }} + > + {(renderProps) => ( +
+
+ +
+ +
+
+ +
+ +
+ +
+
+ + {/*
+
+ + +
+ + +
*/} + +
+ + + +
+
+ )} + +
+
+ ) : ( +

Unknown state

+ )} +
+ ); +} diff --git a/pages/work-journal-admin.js b/pages/work-journal-admin.js index ee1fd91..dcd92b0 100644 --- a/pages/work-journal-admin.js +++ b/pages/work-journal-admin.js @@ -1,9 +1,11 @@ import { Head, Container, Spacer, Title, Lead } from "../components/ui"; import { useEffect, useState, useRef } from "react"; import * as firebase from "firebase/app"; +import { format } from "date-fns"; + // Add the Firebase products that you want to use import "firebase/database"; -import { format } from "date-fns"; +import "firebase/auth"; let firebaseApp; @@ -97,6 +99,7 @@ export default function WorkJournalAdminPage() {

New entry

+