使用Auth0与Next.js时组件未被UserProvider包裹报错排查

在使用Auth0与Next.js开发项目时，尝试通过组件获取基础用户信息并实现登录/登出功能，反复触发报错：Error: You forgot to wrap your app in <UserProvider>。

报错栈信息 #

error - Error: You forgot to wrap your app in <UserProvider>
    at Object.get user [as user] (C:\Users\name\Documents\GitHub\RunningTracker\running-tracker\node_modules\@auth0\nextjs-auth0\dist\client\use-user.js:41:15)
    at Username (webpack-internal:///./pages/userComponenets.js:18:13)
    at renderWithHooks (C:\Users\name\Documents\GitHub\RunningTracker\running-tracker\node_modules\react-dom\cjs\react-dom-server-legacy.browser.development.js:5661:16)
    at renderIndeterminateComponent (C:\Users\name\Documents\GitHub\RunningTracker\running-tracker\node_modules\react-dom\cjs\react-dom-server-legacy.browser.development.js:5734:15)
    at renderElement (C:\Users\name\Documents\GitHub\RunningTracker\running-tracker\node_modules\react-dom\cjs\react-dom-server-legacy.browser.development.js:5949:7)
    at renderNodeDestructiveImpl (C:\Users\name\Documents\GitHub\RunningTracker\running-tracker\node_modules\react-dom\cjs\react-dom-server-legacy.browser.development.js:6107:11)
    at renderNodeDestructive (C:\Users\name\Documents\GitHub\RunningTracker\running-tracker\node_modules\react-dom\cjs\react-dom-server-legacy.browser.development.js:6079:14)

组件代码（pages/userComponenets.js） #

import {useUser } from '@auth0/nextjs-auth0/client';
import React,{ Component } from 'react';
import styles from '../styles/Home.module.css';

const Username = () => {
  const{user, error, isLoading } = useUser();
  if (isLoading) {
    return (<div>Loading...</div>  );}
  if (error){
    return (<div>{error.message}</div>);}
  if (user) {
      return (<div href="/api/auth/logout" className={styles.NavTextRight}>Logout</div>);
  }
  return (<div href="/api/auth/login" className={styles.NavTextRight}>Login</div>);
};

export default Username;

首页引入代码片段（pages/index.js） #

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Script from 'next/script';
import Username from '../pages/userComponenets';
import { Component,React } from 'react';

export default function Home() {
  return (
    <div className={styles.container}>
       <Head className ={styles.main}>
        <title>Running Tracker | Home</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
            <link
          rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
        <Script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></Script>
        <Script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></Script>
        <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand" href="\">Running Tracker</a>
            </div>
            <ul class="nav navbar-nav">
              <li><a href="\" className={styles.Navtext}>Home</a></li>
              <li><a href="\profile" className={styles.Navtext}>Profile</a></li>
              <li><a href="\teams" className={styles.Navtext}>Team</a></li>
              <li><a href="\races" className={styles.Navtext}>Races</a></li>
              <li>
              <Username />
              </li>

1. 用UserProvider全局包裹应用 #

useUser钩子依赖Auth0的上下文，必须在UserProvider包裹的范围内使用。在Next.js的全局入口文件pages/_app.js中添加包裹：

// pages/_app.js
import { UserProvider } from '@auth0/nextjs-auth0/client';
import '../styles/globals.css';

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

2. 修复登录/登出链接标签 #

组件中用<div>标签添加href属性无效，替换为<a>标签才能实现跳转：

// 修改后的Username组件核心代码
if (user) {
  return (<a href="/api/auth/logout" className={styles.NavTextRight}>Logout</a>);
}
return (<a href="/api/auth/login" className={styles.NavTextRight}>Login</a>);

3. 确认Auth0基础配置 #

检查项目根目录的.env.local文件，确保已配置完整的Auth0环境变量：

AUTH0_SECRET=你的Auth0密钥
AUTH0_BASE_URL=http://localhost:3000
AUTH0_ISSUER_BASE_URL=你的Auth0域名（例如https://xxx.auth0.com）
AUTH0_CLIENT_ID=你的Auth0客户端ID
AUTH0_CLIENT_SECRET=你的Auth0客户端密钥

内容的提问来源于stack exchange，提问作者ThatOneKaiser