Nextjs-auth0에서 baseURL 오류 수정

nextjs 및 auth0 인증 코드를 설정하는 동안 부지런히 따랐던 YouTube 자습서 및 auth0 문서와 달리 여전히 이 오류가 발생했으며 오류를 수정하는 솔루션을 찾는 데 시간이 걸렸습니다. Talk is cheap show me the code.
👾 바로 오류 수정에 대해 살펴보겠습니다.

오류 이미지.



이 정확한 오류가 발생하는 경우 이 문서에서 정확한 수정 사항을 제공합니다.

전제 조건:

_app.js에서 UserProvider를 가져와 구성 요소 주위에 래핑해야 합니다.

import "../styles/globals.css";
import { UserProvider } from "@auth0/nextjs-auth0";

function MyApp({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}

export default MyApp;

1단계:

앱의 루트에 .env.local 파일을 생성했는지 확인하세요.



2단계:

.env.local 파일의 내용은 이 형식으로 정렬되어야 합니다.
AUTH0_SECRET='random generated number'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='https://YOUR_DOMAIN_AUTH0_DASHBOARD'
AUTH0_CLIENT_ID='CLIENT_ID_AUTH0_DASHBOARD'
AUTH0_CLIENT_SECRET='CLIENT_SECRET_AUTH0_DASHBOARD'
3단계:

pages/api/auth/[…auth0].js 파일에서.

// pages/api/auth/[...auth0].js
import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth({
    baseUrl: process.env.AUTH0_BASE_URL
});

이것은 오류가 발생한 파일입니다.

아래 스니펫인 nextjs에 대한 auth0 문서에 있는 것과 반대입니다.

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

export default handleAuth();

handleauth가 env.local 파일에서 baseUrl을 읽을 수 없기 때문에 확실히 오류가 발생합니다.

4단계:

마지막 단계는 브라우저의 URL에서 인증 URL로 이동하는 것입니다.

localhost URL에 api/auth/login을 추가합니다.

http://localhost:3000/ API/인증/로그인

이것이 오류를 해결하는 데 도움이 되었다면 브라우저에 이 메시지가 표시됩니다http://localhost:3000/api/auth/login.



😜 드디어! 문제 해결됨.

이것이 내 트위터 핸들 @celebrity_dev를 팔로우하는 데 도움이 되었다면