add session handling

solygambas · solygambas · commit ab43cdb59688 · 2021-03-27T13:10:10.000+01:00
diff --git a/components/auth/auth-form.js b/components/auth/auth-form.js
@@ -1,5 +1,6 @@
 import { useState, useRef } from "react";
 import { signIn } from "next-auth/client";
+import { useRouter } from "next/router";
 
 import classes from "./auth-form.module.css";
 
@@ -17,6 +18,7 @@ async function createUser(email, password) {
 }
 
 function AuthForm() {
+  const router = useRouter();
   const emailInputRef = useRef();
   const passwordInputRef = useRef();
   const [isLogin, setIsLogin] = useState(true);
@@ -36,7 +38,7 @@ function AuthForm() {
         password: enteredPassword,
       });
       if (!result.error) {
-        // set auth state
+        router.replace("/profile");
       }
     } else {
       try {
diff --git a/components/profile/user-profile.js b/components/profile/user-profile.js
@@ -1,8 +1,28 @@
-import ProfileForm from './profile-form';
-import classes from './user-profile.module.css';
+// import { getSession } from "next-auth/client";
+// import { useState, useEffect } from "react";
+// import { useRouter } from "next/router";
+
+import ProfileForm from "./profile-form";
+import classes from "./user-profile.module.css";
 
 function UserProfile() {
-  // Redirect away if NOT auth
+  // alternative method if you don't want to use getServerSideProps on profile page
+  // const router = useRouter();
+  // const [isLoading, setIsLoading] = useState(true);
+
+  // useEffect(() => {
+  //   getSession().then((session) => {
+  //     if (!session) {
+  //       router.push("/auth");
+  //     } else {
+  //       setIsLoading(false);
+  //     }
+  //   });
+  // }, []);
+
+  // if (isLoading) {
+  //   return <p className={classes.profile}>Loading...</p>;
+  // }
 
   return (
     <section className={classes.profile}>
diff --git a/pages/_app.js b/pages/_app.js
@@ -1,16 +1,19 @@
 import Head from "next/head";
+import { Provider } from "next-auth/client";
 
 import Layout from "../components/layout/layout";
 import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {
   return (
-    <Layout>
-      <Head>
-        <title>NextAuth</title>
-      </Head>
-      <Component {...pageProps} />
-    </Layout>
+    <Provider session={pageProps.session}>
+      <Layout>
+        <Head>
+          <title>NextAuth</title>
+        </Head>
+        <Component {...pageProps} />
+      </Layout>
+    </Provider>
   );
 }
 
diff --git a/pages/auth.js b/pages/auth.js
@@ -1,6 +1,28 @@
-import AuthForm from '../components/auth/auth-form';
+import { useRouter } from "next/router";
+import { getSession } from "next-auth/client";
+import { useEffect, useState } from "react";
+
+import AuthForm from "../components/auth/auth-form";
 
 function AuthPage() {
+  // Alternative to getServerSideProps, see profile page
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    getSession().then((session) => {
+      if (session) {
+        router.replace("/");
+      } else {
+        setIsLoading(false);
+      }
+    });
+  }, [router]);
+
+  if (isLoading) {
+    return <p>Loading...</p>;
+  }
+
   return <AuthForm />;
 }
 
diff --git a/pages/profile.js b/pages/profile.js
@@ -1,7 +1,23 @@
-import UserProfile from '../components/profile/user-profile';
+import { getSession } from "next-auth/client";
+import UserProfile from "../components/profile/user-profile";
 
 function ProfilePage() {
   return <UserProfile />;
 }
 
+export async function getServerSideProps(context) {
+  const session = await getSession({ req: context.req });
+  if (!session) {
+    return {
+      redirect: {
+        destination: "/auth",
+        permanent: false,
+      },
+    };
+  }
+  return {
+    props: { session },
+  };
+}
+
 export default ProfilePage;
