Add a private "Dashboard" route. Add links for easier access.

web/components/links.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export function Links() {
+  return <ul>
+    <li><a href={"/"}>Home</a></li>
+    <li><a href={"/login"}>Login</a></li>
+    <li><a href={"/dashboard"}>Dashboard (protected)</a></li>
+  </ul>
+}

web/components/private_route.tsx

@@ -0,0 +1,50 @@
+import ServerCookie from "next-cookies";
+import Router from "next/router";
+import React, { Component } from "react";
+import { COOKIES } from "../services/login_service";
+import { AuthToken } from "../services/auth_token";
+
+export type AuthProps = {
+  auth: AuthToken
+}
+
+type AuthState = {
+  auth: AuthToken
+}
+
+export function privateRoute(WrappedComponent: any) {
+  return class extends Component<AuthProps, AuthState> {
+    state = {
+      auth: new AuthToken(this.props.auth.token),
+    };
+
+    static async getInitialProps(ctx: any) {
+      const token = ServerCookie(ctx)[COOKIES.authToken];
+      const auth = new AuthToken(token);
+      const initialProps = { auth };
+      if (WrappedComponent.getInitialProps) return WrappedComponent.getInitialProps(initialProps);
+      return initialProps;
+    }
+
+    componentDidMount(): void {
+      if (this.props.auth.decodedToken.exp === 0 || this.state.auth.isExpired) {
+        Router.push("/login");
+      }
+    }
+
+    componentDidUpdate(): void {
+      if (this.props.auth.decodedToken.exp === 0 || this.state.auth.isExpired) {
+        Router.push("/login");
+      }
+    }
+
+    render() {
+      // the server pass to the client serializes the token
+      // so we have to reinitialize the authToken class
+      //
+      // @see https://github.com/zeit/next.js/issues/3536
+      // const auth =;
+      return <WrappedComponent auth={this.state.auth} {...this.props} />;
+    }
+  };
+}

web/pages/dashboard.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import { AuthProps, privateRoute } from "../components/private_route";
+import Cookie from "js-cookie";
+import Router from "next/router";
+import { COOKIES } from "../services/login_service";
+
+function Page(props: AuthProps) {
+  const logout = async () => {
+    Cookie.remove(COOKIES.authToken);
+    alert("logout");
+    await Router.push("/login");
+  };
+
+  return <>
+    <p>Hello Dashboard</p>
+    <p>{JSON.stringify(props.auth)}</p>
+    <button onClick={logout}>Logout</button>
+  </>
+}
+
+export default privateRoute(Page);

web/pages/index.tsx

@@ -1,12 +1,10 @@
 import React from "react";
+import { Links } from "../components/links";
 
 function Page() {
-    return <>
-        <ul>
-            <li><a href={"/"}>Home</a></li>
-            <li><a href={"/login"}>Login</a></li>
-        </ul>
-    </>;
+  return <>
+    <Links/>
+  </>;
 }
 
 export default Page;

web/pages/login.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { login } from "../services/login_service";
+import { Links } from "../components/links";
 
 export type LoginInputs = {
   email: string
@@ -28,7 +29,10 @@ function Page() {
   };
 
   return <>
+    <Links/>
+
     {error ? <p>Error: {error}</p> : null}
+
     <form className="container mx-auto max-w-sm" onSubmit={handleSubmit}>
       <div>
         <label htmlFor="email">Email</label>