Example: add NextAuth example (#91)

Author: fwang

.changeset/grumpy-trains-dream.md

@@ -0,0 +1,5 @@
+---
+"open-next": patch
+---
+
+Example: add NextAuth example

example/.gitignore

@@ -28,3 +28,9 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+
+# open-next
+/.open-next
+
+# sst
+/.sst

example/package.json

@@ -11,15 +11,16 @@
     "date-fns": "^2.23.0",
     "gray-matter": "^4.0.3",
     "next": "13.0.5",
+    "next-auth": "^4.22.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "remark": "^13.0.0",
     "remark-html": "^13.0.2",
     "swr": "^1.0.1"
   },
   "devDependencies": {
-    "sst": "^2.5.3",
     "aws-cdk-lib": "2.72.1",
-    "constructs": "10.1.156"
+    "constructs": "10.1.156",
+    "sst": "^2.5.3"
   }
 }

example/pages/_app.js

@@ -1,5 +1,13 @@
 import "../styles/global.css";
+import { SessionProvider } from "next-auth/react";
 
-export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />;
+export default function App({
+  Component,
+  pageProps: { session, ...pageProps },
+}) {
+  return (
+    <SessionProvider session={session}>
+      <Component {...pageProps} />
+    </SessionProvider>
+  );
 }

example/pages/api/auth/[...nextauth].js

@@ -0,0 +1,14 @@
+import NextAuth from "next-auth";
+import GithubProvider from "next-auth/providers/github";
+import { Config } from "sst/node/config";
+
+export const authOptions = {
+  providers: [
+    GithubProvider({
+      clientId: Config.GITHUB_CLIENT_ID,
+      clientSecret: Config.GITHUB_CLIENT_SECRET,
+    }),
+  ],
+};
+
+export default NextAuth(authOptions);

example/pages/index.js

@@ -35,6 +35,7 @@ export default function Home({}) {
         <Link href={`/middleware-redirect`}>Middleware — redirect</Link><br />
         <Link href={`/middleware-set-header`}>Middleware — set header</Link><br />
         <Link href={`/middleware-geolocation`}>Middleware — geolocation</Link><br />
+        <Link href={`/next-auth`}>NextAuth</Link><br />
         <Link href={`/image-optimization-imported`}>Image Optimization — imported image</Link><br />
         <Link href={`/image-optimization-remote`}>Image Optimization — remote image</Link><br />
         <Link href={`/image-html-tag`}>Image using html image tag</Link><br />

example/pages/next-auth.js

@@ -0,0 +1,41 @@
+import Layout from "../components/layout";
+import Link from "next/link";
+import { useSession, signIn, signOut } from "next-auth/react";
+
+function LoginButton() {
+  const { data: session } = useSession();
+  if (session) {
+    return (
+      <>
+        Signed in as {session.user.email} <br />
+        <button onClick={() => signOut()}>Sign out</button>
+      </>
+    );
+  }
+  return (
+    <>
+      Not signed in <br />
+      <button onClick={() => signIn()}>Sign in</button>
+    </>
+  );
+}
+
+export default function Page() {
+  return (
+    <Layout>
+      <article>
+        <h1>
+          NextAuth
+        </h1>
+        <hr />
+        <LoginButton />
+        <br />
+        <p>
+          <b>Test 1:</b> Sign in, and your email is displayed.
+          <br />
+          <b>Test 2:</b> Sign out, and your email is cleared.
+        </p>
+      </article>
+    </Layout>
+  );
+}

example/pnpm-lock.yaml

@@ -1,5 +1,5 @@
 import { SSTConfig } from "sst";
-import { NextjsSite } from "sst/constructs";
+import { Config, NextjsSite } from "sst/constructs";
 
 export default {
   config(_input) {
@@ -10,7 +10,12 @@ export default {
   },
   stacks(app) {
     app.stack(function Site({ stack }) {
-      const site = new NextjsSite(stack, "site");
+      const site = new NextjsSite(stack, "site",{
+        bind: [
+          new Config.Secret(stack, "GITHUB_CLIENT_ID"),
+          new Config.Secret(stack, "GITHUB_CLIENT_SECRET"),
+        ],
+      });
 
       stack.addOutputs({
         SiteUrl: site.url,