NextJS + Typescript built failed with @auth0/nextjs-auth0

Try what the error message says, by running:

npm i --save-dev @types/url-join

If that does not work, then try deleting node_modules and then run npm install or yarn

I recommend you to take a look at the official example. I had similar problems with auth0 embed. Don't forget you need to embed your <Component> in app.js to make auth0 work on pages + using withAuthRequired

import { UserProvider } from '@auth0/nextjs-auth0';

export default function App({ Component, pageProps }) {
  const { user } = pageProps;
  return (
      <UserProvider user={user}>
        <Component {...pageProps} />
      </UserProvider>
  );
}

Check your "tsconfig.json" file for compilation option "exclude". If it does not exist, just add it and exclude "node_modules".

// tsconfig.json
{
  "compilerOptions": {
  ...
  "exclude": [
    "node_modules", 
  ]
}

delete the node-modules and package.lock.json, then npm install. If issue is not resolved use this version:

"@auth0/nextjs-auth0": "^1.2.0",

I am using this package in my portfolio webpage, and i did not get any issue. It might be a bug in the new version

Maybe it will be helpful for someone having the same problem. In my case it was a wrong import (autocomplete), which took the Session from src directory.

import { Session } from '@auth0/nextjs-auth0/src/session';

Try next auth instead, it's more fluid. Define your provider in your Server.js

import NextAuth from 'next-auth'
import AppleProvider from 'next-auth/providers/apple'
import FacebookProvider from 'next-auth/providers/facebook'
import GoogleProvider from 'next-auth/providers/google'
import EmailProvider from 'next-auth/providers/email'

export default NextAuth({
  providers: [
    // OAuth authentication providers...
    AppleProvider({
      clientId: process.env.APPLE_ID,
      clientSecret: process.env.APPLE_SECRET
    }),
    FacebookProvider({
      clientId: process.env.FACEBOOK_ID,
      clientSecret: process.env.FACEBOOK_SECRET
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET
    }),
    // Passwordless / email sign in
    EmailProvider({
      server: process.env.MAIL_SERVER,
      from: 'NextAuth.js <[email protected]>'
    }),
  ]
})

App.js

import { SessionProvider } from "next-auth/react"

export default function App({
  Component, pageProps: { session, ...pageProps }
}) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps}/>
    </SessionProvider>
  )
}

Index.js

import { useSession, signIn, signOut } from "next-auth/react"

export default function Component() {
  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>
  </>
}

Create a .env.local and add you provider client ids and secrets.

I followed the nextjs documentation on github and didn't expect this compile error. I deleted the node modules and package.json and ran npm install. The thing that got rid of the error was switching the original import statement from the nextjs github to this:

import { useUser } from '@auth0/nextjs-auth0/client';

Found it on the npm documentation page. https://www.npmjs.com/package/@auth0/nextjs-auth0

Good luck!