Merge pull request #1 from oktadev/react-17

Updates to latest version of Next.js with React 17

.gitignore

@@ -32,3 +32,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# IntelliJ
+.idea/

LICENSE

@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright [yyyy] [name of copyright owner]
+   Copyright 2020-Present Okta, Inc.
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

README.md

@@ -17,6 +17,23 @@ Get all the dependencies:
 npm install
 ```
 
+Install the [Okta CLI](https://cli.okta.com) and run `okta apps create`. Use `Next.js` for the app name, choose **Web**, and press **Enter**.
+
+Use `http://localhost:3000/api/auth/callback/okta` for the Redirect URI and accept the default Logout Redirect URI of `http://localhost:3000`.
+
+Your issuer, client ID, and client secret will be stored in an `.okta.env` file in your current directory.
+
+Create a `.env.local` in the root directory and copy the values from `.okta.env` into it.
+
+```JSON
+OKTA_CLIENTID={yourClientId}
+OKTA_CLIENTSECRET={yourClientSecret}
+OKTA_DOMAIN={yourOktaIssuer}
+NEXTAUTH_URL=http://localhost:3000
+```
+
+**NOTE**: The `{yourOktaIssuer}` value should not have an `https://` prefix. For example, `dev-133337.okta.com/oauth2/default`.
+
 Run the application:
 
 ```sh

components/Header.tsx

@@ -4,43 +4,41 @@ export default function Header() {
 
   const [session, loading] = useSession();
 
-  var button;
+  let button;
 
   if (session) {
     button = <button className="btn btn-secondary" onClick={signOut}>Logout</button>;
-  }
-  else {
+  } else {
     button = <button className="btn btn-primary" onClick={signIn}>Login</button>;
   }
 
   return (
-
     <div className="row mb-4">
       <div className="col-lg-12">
         <nav className="navbar navbar-expand-lg navbar-light bg-light">
-          <a className="navbar-brand" href="#">Home</a>
-
-          <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-            <span className="navbar-toggler-icon"></span>
-          </button>
-
-          <div className="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul className="navbar-nav mr-auto">
-              <li className="nav-item active">
-                <a className="nav-link" href="/">Home <span className="sr-only">(current)</span></a>
-              </li>
-              <li className="nav-item">
-                <a className="nav-link" href="dashboard">Movies</a>
-              </li>
-            </ul>
-            <div className="form-inline my-2 my-lg-0">
-              {button}
+          <div className="container-fluid">
+            <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+              <span className="navbar-toggler-icon"></span>
+            </button>
+
+            <a className="navbar-brand" href="#">Home</a>
+
+            <div className="collapse navbar-collapse" id="navbarSupportedContent">
+              <ul className="navbar-nav me-auto mb-2 mb-lg-0">
+                <li className="nav-item">
+                  <a className="nav-link active" href="/">Home <span className="sr-only">(current)</span></a>
+                </li>
+                <li className="nav-item">
+                  <a className="nav-link" href="dashboard">Movies</a>
+                </li>
+              </ul>
+              <form className="d-flex">
+                {button}
+              </form>
             </div>
-
           </div>
         </nav>
       </div>
     </div>
   )
-
-}
+}

components/Unauthorized.tsx

@@ -2,16 +2,15 @@ import { signIn } from 'next-auth/client'
 
 export default function Unauthorized() {
 
-    return (
-        <div className="row">
-            <div className="col-lg-10 col-offset-1">
+  return (
+    <div className="row">
+      <div className="col-lg-10 col-offset-1">
+        <p>Hey There, looks like you reached an area you don't have access to.</p>
 
-                <p>Hey There, looks like you reached an area you don't have access to.</p>
+        <p>Please sign in here.</p>
 
-               <p> Please Sign in here.</p>
-
-               <p> <button className="btn btn-secondary" onClick={signIn}>Sign in</button></p>
-            </div>
-        </div>
-    )
-}
+        <p><button className="btn btn-secondary" onClick={signIn}>Sign in</button></p>
+      </div>
+    </div>
+  )
+}

next-env.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+}