修复使用auth0和nextjs Package userProvider的问题

我在尝试从组件文件访问基本用户信息时遇到了一个错误。当调用以获取userdata，然后解析并返回一个基本登录函数时，不断弹出一个错误，指出它没有 Package 在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)

下面是它的代码：（组件文件）

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;

（索引文件到显示屏）

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>

作为参考，我确实在实际文件中的它下面有关闭标签，但它的内容不影响auth0，是基本的html。有什么我错过了或参考的地方，可能有一个解决方案？

看起来您使用的是nextjsversion13引入的新文件结构。
因此，您没有_app.[js|jsx公司|ts|tsx]文件，无法按照说明 Package 。
在这个时候，我不认为Auth0支持新的文件结构，从所听到的不会，直到它是出测试版。
在这个github线程https://github.com/auth0/nextjs-auth0/issues/889中有更多关于这个问题的详细信息以及一个变通方法
如果你想直接跳到答案上来，我发现这个方法很有效，但我相信还有更好的方法。

import { UserProfile } from '@auth0/nextjs-auth0/client'

const getUser = async (): Promise<UserProfile | null> => {
  const sessionCookie = cookies().get('appSession')?.value
  if (sessionCookie === undefined) return null
  const res = await fetch(`${process.env.AUTH0_BASE_URL}/api/auth/me`, {
    headers: {
      cookie: `appSession=${sessionCookie}`,
    },
  })
  return await (res.status === 200 ? res.json() : null)
}

const Home = async () => {
  const user = await getUser();

  return (
    <p>
      {JSON.stringify(user)}
      <br/>
      <a href="/api/auth/login">LOG IN</a>
    </p>
  )
};

export default Home

修复使用auth0和nextjs Package userProvider的问题

1条答案

相关问题

热门标签

最新问答