diff --git a/components/FirebaseAuth.js b/components/FirebaseAuth.js
index 1ce0d10..eda0b51 100644
--- a/components/FirebaseAuth.js
+++ b/components/FirebaseAuth.js
@@ -1,17 +1,17 @@
/* globals window */
-import { useEffect, useState } from 'react'
-import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth'
-import firebase from 'firebase/app'
-import 'firebase/auth'
-import initFirebase from '../utils/auth/initFirebase'
-import { setUserCookie } from '../utils/auth/userCookies'
-import { mapUserData } from '../utils/auth/mapUserData'
+import { useEffect, useState } from "react";
+import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
+import firebase from "firebase/app";
+import "firebase/auth";
+import initFirebase from "../utils/auth/initFirebase";
+import { setUserCookie } from "../utils/auth/userCookies";
+import { mapUserData } from "../utils/auth/mapUserData";
// Init the Firebase app.
-initFirebase()
+initFirebase();
const firebaseAuthConfig = {
- signInFlow: 'popup',
+ signInFlow: "popup",
// Auth providers
// https://github.com/firebase/firebaseui-web#configure-oauth-providers
signInOptions: [
@@ -19,26 +19,29 @@ const firebaseAuthConfig = {
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
requireDisplayName: false,
},
+ {
+ provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+ },
],
- signInSuccessUrl: '/',
- credentialHelper: 'none',
+ signInSuccessUrl: "/",
+ credentialHelper: "none",
callbacks: {
signInSuccessWithAuthResult: async ({ user }, redirectUrl) => {
- const userData = mapUserData(user)
- setUserCookie(userData)
+ const userData = mapUserData(user);
+ setUserCookie(userData);
},
},
-}
+};
const FirebaseAuth = () => {
// Do not SSR FirebaseUI, because it is not supported.
// https://github.com/firebase/firebaseui-web/issues/213
- const [renderAuth, setRenderAuth] = useState(false)
+ const [renderAuth, setRenderAuth] = useState(false);
useEffect(() => {
- if (typeof window !== 'undefined') {
- setRenderAuth(true)
+ if (typeof window !== "undefined") {
+ setRenderAuth(true);
}
- }, [])
+ }, []);
return (
{renderAuth ? (
@@ -48,7 +51,7 @@ const FirebaseAuth = () => {
/>
) : null}
- )
-}
+ );
+};
-export default FirebaseAuth
+export default FirebaseAuth;
diff --git a/components/authRequired.jsx b/components/authRequired.jsx
new file mode 100644
index 0000000..72fcea8
--- /dev/null
+++ b/components/authRequired.jsx
@@ -0,0 +1,17 @@
+import Link from "next/link";
+
+const AuthRequired = (props) => {
+ return (
+ <>
+ Hi there!
+
+ You are not signed in.{" "}
+
+ Sign in
+
+
+
+ );
+};
+
+export default AuthRequired;
diff --git a/components/defaultLayout.jsx b/components/defaultLayout.jsx
new file mode 100644
index 0000000..63f24a5
--- /dev/null
+++ b/components/defaultLayout.jsx
@@ -0,0 +1,165 @@
+import Link from "next/link";
+import Head from "next/head";
+import { Container, CssBaseline, NoSsr } from "@material-ui/core";
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+import MaterialLink from "@material-ui/core/Link";
+import Button from "@material-ui/core/Button";
+import { makeStyles } from "@material-ui/core/styles";
+import { useUser } from "../utils/auth/useUser";
+import AuthRequired from "./authRequired";
+
+const useStyles = makeStyles((theme) => ({
+ "@global": {
+ ul: {
+ margin: 0,
+ padding: 0,
+ listStyle: "none",
+ },
+ },
+ appBar: {
+ borderBottom: `1px solid ${theme.palette.divider}`,
+ },
+ toolbar: {
+ flexWrap: "wrap",
+ },
+ toolbarTitle: {
+ flexGrow: 1,
+ },
+ link: {
+ margin: theme.spacing(1, 1.5),
+ },
+ heroContent: {
+ padding: theme.spacing(8, 0, 6),
+ },
+ cardHeader: {
+ backgroundColor:
+ theme.palette.type === "light"
+ ? theme.palette.grey[200]
+ : theme.palette.grey[700],
+ },
+ cardPricing: {
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "baseline",
+ marginBottom: theme.spacing(2),
+ },
+ footer: {
+ borderTop: `1px solid ${theme.palette.divider}`,
+ marginTop: theme.spacing(8),
+ paddingTop: theme.spacing(3),
+ paddingBottom: theme.spacing(3),
+ [theme.breakpoints.up("sm")]: {
+ paddingTop: theme.spacing(6),
+ paddingBottom: theme.spacing(6),
+ },
+ },
+}));
+
+export default function DefaultLayout({
+ children,
+ title = "Commander League",
+ requiresAuth = false,
+}) {
+ const classes = useStyles();
+ const { user, logout } = useUser();
+
+ const renderAuthButtons = () => {
+ if (user) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+ );
+ };
+
+ return (
+
+
+
{title}
+
+
+
+
+
+
+
+
+
+
+
+
+ Commander League
+
+
+
+ {renderAuthButtons()}
+
+
+
+ {/* */}
+ {!user && requiresAuth ? : children}
+ {/* */}
+
+
+
+
+
+
+ );
+};
-export default Auth
+export default Auth;
diff --git a/pages/example.js b/pages/example.js
index 6f17947..4537ed0 100644
--- a/pages/example.js
+++ b/pages/example.js
@@ -1,17 +1,18 @@
-import Link from 'next/link'
+import Link from "next/link";
+import DefaultLayout from "../components/defaultLayout";
const Example = (props) => {
return (
-
+
This page is static because it does not fetch any data or include the
authed user info.
-
+
Home
- Hi there!
-
- You are not signed in.{' '}
-
- Sign in
-
-
-
- )
- }
-
- return (
-
-
-
You're signed in. Email: {user.email}
-
logout()}
- >
- Log out
-
-
-
- {error &&
Failed to fetch food!
}
- {data && !error ? (
-
Your favorite food is {data.food}.
- ) : (
-
Loading...
- )}
-