Update to Latest Next-JS-Auth0 Version

.env.local.txt

@@ -3,10 +3,10 @@
 AUTH0_SECRET=""
 
 # The base URL of your application where users will be redirected after authentication (e.g., http://localhost:3000/).
-AUTH0_BASE_URL=""
+APP_BASE_URL=""
 
 # The URL of your Auth0 tenant, which identifies the domain associated with your Auth0 account.
-AUTH0_ISSUER_BASE_URL=""
+AUTH0_DOMAIN=""
 
 # The Client ID of your Auth0 application, used to identify your app to Auth0.
 AUTH0_CLIENT_ID=""

.github/workflows/lint.yml

@@ -9,6 +9,9 @@ jobs:
             - name: Check out Git repository
               uses: actions/checkout@v5
 
+            - name: Enable corepack
+              run: corepack enable
+
             - name: Set up Node.js
               uses: actions/setup-node@v5
               with:

.gitignore

@@ -15,6 +15,9 @@
 # production
 /build
 
+# Editor settings
+/.vscode/
+
 # misc
 .DS_Store
 
@@ -31,3 +34,12 @@ yarn-error.log*
 .env.production.local
 
 !.env.local.txt
+
+# Yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.prettierignore

@@ -0,0 +1,2 @@
+.next
+next-env.d.ts

.prettierrc

@@ -6,7 +6,6 @@
     "quoteProps": "as-needed",
     "jsxSingleQuote": true,
     "singleQuote": true,
-
     "trailingComma": "es5",
     "bracketSpacing": true,
     "bracketSameLine": false,

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

app/Content.tsx

@@ -2,7 +2,8 @@
 
 import React, { ReactNode } from 'react';
 
-import { useUser } from '@auth0/nextjs-auth0/client';
+import { useUser } from '@auth0/nextjs-auth0';
+import { Pane, Text, Paragraph } from 'evergreen-ui';
 import { Metadata } from 'next';
 
 import Layout from '@/lib/hoagie-ui/Layout';
@@ -20,14 +21,14 @@
     children,
 }: {
     children: ReactNode;
-}): JSX.Element {
+}): React.JSX.Element {
     const tabs = [
         { href: '/all', title: 'All' },
         { href: '/marketplace', title: 'Marketplace' },
         { href: '/lost', title: 'Lost & Found' },
         { href: '/bulletins', title: 'Bulletins' },
     ];
-    const user = useUser();
+    const { user } = useUser();
 
     return (
         <Theme palette='gray'>

app/api/hoagie/[...path]/route.ts

@@ -1,13 +1,17 @@
-import { getAccessToken, withApiAuthRequired } from '@auth0/nextjs-auth0';
 import {
     NextRequest,
     RequestInit,
 } from 'next/dist/server/web/spec-extension/request';
 import { NextResponse } from 'next/server';
 
-const handler = withApiAuthRequired(async (request: NextRequest, ctx) => {
+import { auth0 } from '@/lib/auth0';
+
+async function handler(
+    request: NextRequest,
+    { params }: { params: Promise<{ path: string[] }> }
+) {
     // Not very good, fix this later
-    const path = (ctx?.params?.path as string[]).join('/');
+    const path = (await params).path.join('/');
     const queryString = request.nextUrl.searchParams.toString();
 
     const fetchReq: RequestInit = {
@@ -22,20 +26,20 @@ const handler = withApiAuthRequired(async (request: NextRequest, ctx) => {
     }
 
     try {
-        const { accessToken } = await getAccessToken();
+        const accessToken = await auth0.getAccessToken();
         fetchReq.headers = {
             ...fetchReq.headers,
-            Authorization: `Bearer ${accessToken}`,
+            Authorization: `Bearer ${accessToken.token}`,
         };
     } catch (error: any) {
         return NextResponse.json({ error: error.message }, { status: 401 });
     }
 
     return await proxyRequest(
-        `${process.env.HOAGIE_API_URL}${path}/?${queryString}`,
+        `${process.env.HOAGIE_API_URL}${path}?${queryString}`,
         fetchReq
     );
-});
+}
 
 async function proxyRequest(url: string, fetchReq: RequestInit) {
     try {

app/hoagie.tsx

@@ -1,4 +1,4 @@
-export function hoagie() {
+export default function hoagie() {
     // eslint-disable-next-line no-console
     console.log(`
     █░█ █▀█ ▄▀█ █▀▀ █ █▀▀

app/layout.tsx

@@ -2,17 +2,23 @@ import React, { ReactNode } from 'react';
 
 import '@/lib/hoagie-ui/theme.css';
 import '@/app/stuff.css';
-import { UserProvider } from '@auth0/nextjs-auth0/client';
+import { Auth0Provider } from '@auth0/nextjs-auth0';
 import { Metadata } from 'next';
 
 import Content from '@/app/Content';
-import { hoagie } from '@/app/hoagie';
+import hoagie from '@/app/hoagie';
+import { auth0 } from '@/lib/auth0';
 
 export const metadata: Metadata = {
     title: 'Stuff by Hoagie',
 };
 
-export default function App({ children }: { children: ReactNode }) {
+export default async function RootLayout({
+    children,
+}: {
+    children: ReactNode;
+}) {
+    const session = await auth0.getSession();
     return (
         <html lang='en'>
             <head>
@@ -22,11 +28,11 @@ export default function App({ children }: { children: ReactNode }) {
                     }}
                 />
             </head>
-            <UserProvider>
+            <Auth0Provider user={session?.user}>
                 <body>
                     <Content>{children}</Content>
                 </body>
-            </UserProvider>
+            </Auth0Provider>
         </html>
     );
 }

app/marketplace/page.tsx

@@ -4,4 +4,4 @@ import { withPageAuthRequired } from '@auth0/nextjs-auth0/client';
 
 import PostPage from '@/components/PostPage';
 
-export default withPageAuthRequired(() => <PostPage category='sale' />);
+export default withPageAuthRequired(() => <PostPage category='marketplace' />);

app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useUser } from '@auth0/nextjs-auth0/client';
+import { useUser } from '@auth0/nextjs-auth0';
 import {
     Pane,
     majorScale,
@@ -17,10 +17,9 @@ import Link from 'next/link';
 import AuthButton from '@/lib/hoagie-ui/AuthButton';
 
 export default function Index() {
-    const { user, error, isLoading } = useUser();
+    const { user, isLoading } = useUser();
     let Profile;
     if (isLoading) Profile = <Spinner />;
-    else if (error) Profile = <div>{error.message}</div>;
     else if (user) {
         Profile = (
             <Pane>

eslint.config.js

@@ -10,6 +10,7 @@
  * and/or sell copies of the software. This software is provided "as-is", without warranty of any kind.
  */
 
+import nextPlugin from '@next/eslint-plugin-next';
 import tsEslintPlugin from '@typescript-eslint/eslint-plugin';
 import tsEslintParser from '@typescript-eslint/parser';
 import eslintConfigPrettier from 'eslint-config-prettier';
@@ -21,7 +22,7 @@ import tsEslint from 'typescript-eslint';
 
 export default [
     {
-        ignores: ['.next/*', 'node_modules/*'],
+        ignores: ['.next/*', 'node_modules/*', 'next-env.d.ts'],
     },
     {
         files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
@@ -44,12 +45,15 @@ export default [
             '@typescript-eslint': tsEslintPlugin,
             import: importPlugin,
             'react-hooks': reactHooksEslint,
+            '@next/next': nextPlugin,
         },
         rules: {
-            ...tsEslint.configs.recommended.rules,
+            ...tsEslint.configs.recommendedTypeChecked.rules,
             ...reactEslint.configs.recommended.rules,
             ...reactHooksEslint.configs.recommended.rules,
             ...importPlugin.flatConfigs.recommended.rules,
+            ...nextPlugin.configs.recommended.rules,
+            ...nextPlugin.configs['core-web-vitals'].rules,
             'import/order': [
                 'error',
                 {

lib/auth0.ts

@@ -0,0 +1,8 @@
+import { Auth0Client } from '@auth0/nextjs-auth0/server';
+
+export const auth0 = new Auth0Client({
+    authorizationParameters: {
+        scope: process.env.AUTH0_SCOPE,
+        audience: process.env.AUTH0_AUDIENCE,
+    },
+});

lib/hoagie-ui/AuthButton/index.tsx

@@ -37,7 +37,7 @@ function AuthButton({ variant = 'login', href = '' }: AuthButtonProps) {
         </h2>
     );
     const isLogout = variant === 'logout';
-    const defHref = isLogout ? '/api/auth/logout' : '/api/auth/login';
+    const defHref = isLogout ? '/auth/logout' : '/auth/login';
 
     return (
         <a href={href === '' ? defHref : href}>

lib/hoagie-ui/Nav/index.tsx

@@ -14,7 +14,7 @@
 
 import { ComponentType } from 'react';
 
-import { UserProfile } from '@auth0/nextjs-auth0/client';
+import { User } from '@auth0/nextjs-auth0/types';
 import {
     majorScale,
     Pane,
@@ -45,7 +45,7 @@ export type Nav = {
     tabs?: Array<any>;
 
     // Authenticated user data.
-    user?: UserProfile;
+    user?: User;
 
     // A flag to show the "beta" development disclaimer on the hoagie app logo.
     beta?: boolean;

lib/hoagie-ui/ProfileCard/index.tsx

@@ -10,7 +10,7 @@
  * and/or sell copies of the software. This software is provided "as-is", without warranty of any kind.
  */
 
-import { UserProfile } from '@auth0/nextjs-auth0/client';
+import { User } from '@auth0/nextjs-auth0/types';
 import {
     majorScale,
     Button,
@@ -25,7 +25,7 @@ import {
  * ProfileCard is a profile card meant for display of user information
  *  throughout different Hoagie applications.
  */
-function ProfileCard({ user }: { user: UserProfile }) {
+function ProfileCard({ user }: { user: User }) {
     const theme = useTheme();
     const name = user?.name;
     const email =

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -0,0 +1,22 @@
+import { NextConfig } from 'next';
+import withPWA from 'next-pwa';
+
+const nextConfig: NextConfig = {
+    reactStrictMode: true,
+    ...withPWA({
+        dest: 'public',
+        register: true,
+        skipWaiting: true,
+    }),
+    pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
+    images: {
+        remotePatterns: [
+            {
+                protocol: 'https',
+                hostname: 'i.imgur.com',
+            },
+        ],
+    },
+};
+
+export default nextConfig;