thevisioner · March 7, 2023 18:42 · Mar 7, 2023
diff --git a/.env.local.example b/.env.local.example
@@ -0,0 +1,6 @@
+GOOGLE_OAUTH_CLIENT_ID=
+GOOGLE_OAUTH_CLIENT_SECRET=
+NEXTAUTH_SECRET=
+# Use 127.0.0.1 instead of localhost to avoid issues with NextAuth.js
+NEXTAUTH_URL=http://127.0.0.1:3000
+STRAPI_BACKEND_URL=http://127.0.0.1:1337
diff --git a/[...nextauth].ts b/[...nextauth].ts
@@ -0,0 +1,52 @@
+// pages/api/auth/[...nextauth].ts
+
+import { NextApiRequest, NextApiResponse } from "next";
+import NextAuth, { NextAuthOptions } from "next-auth";
+import GoogleProvider from "next-auth/providers/google";
+
+export const authOptions: NextAuthOptions = {
+  providers: [
+    GoogleProvider({
+      clientId: process.env.GOOGLE_OAUTH_CLIENT_ID!,
+      clientSecret: process.env.GOOGLE_OAUTH_CLIENT_SECRET!,
+    }),
+  ],
+
+  callbacks: {
+    // This method is not invoked when you persist sessions in a database.
+    async jwt({ token, account }) {
+      if (account) {
+        const res = await fetch(
+          `${process.env.STRAPI_BACKEND_URL}/api/auth/${account.provider}/callback?access_token=${account.access_token}`
+        );
+        const data = await res.json();
+        const { jwt, user } = data;
+        token.accessToken = jwt;
+        token.userId = user.id;
+      }
+      return token;
+    },
+
+    async session({ session, token, user }) {
+      // Send properties to the client, like an access_token from a provider.
+      session.user.accessToken = token.accessToken as string;
+      session.user.userId = token.userId as number;
+      return session;
+    },
+  },
+
+  session: {
+    // The default is `"jwt"`, an encrypted JWT (JWE) stored in the session cookie.
+    // If you use an `adapter` however, we default it to `"database"` instead.
+    // You can still force a JWT session by explicitly defining `"jwt"`.
+    strategy: "jwt",
+  },
+
+  // Not providing any secret or NEXTAUTH_SECRET will throw an error in production.
+  secret: process.env.NEXTAUTH_SECRET,
+};
+
+const auth = (req: NextApiRequest, res: NextApiResponse) =>
+  NextAuth(req, res, authOptions);
+
+export default auth;
diff --git a/_app.tsx b/_app.tsx
@@ -0,0 +1,15 @@
+// pages/_app.tsx
+
+import type { AppProps } from "next/app";
+import { SessionProvider } from "next-auth/react";
+
+export default function App({
+  Component,
+  pageProps: { session, ...pageProps },
+}: AppProps) {
+  return (
+    <SessionProvider session={session}>
+      <Component {...pageProps} />
+    </SessionProvider>
+  );
+}
diff --git a/index.tsx b/index.tsx
@@ -0,0 +1,26 @@
+// pages/index.tsx
+
+import { useSession, signIn, signOut } from "next-auth/react";
+
+export default function IndexPage() {
+  const { data: session, status } = useSession();
+
+  const isLoading = status === "loading";
+  if (isLoading) return "Loading...";
+
+  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>
+    </>
+  );
+}
diff --git a/next-auth.d.ts b/next-auth.d.ts
@@ -0,0 +1,15 @@
+// types/next-auth.d.ts
+
+import NextAuth, { DefaultSession } from "next-auth";
+
+declare module "next-auth" {
+  /**
+   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
+   */
+  interface Session {
+    user: {
+      accessToken: string;
+      userId: number;
+    } & DefaultSession["user"];
+  }
+}
No results found