기존 서버가 없는 다음 단계에 인증을 추가합니다.js 프로그램이 Nextuth에 곧 나타날 것입니다.js!

Updated 25.05.21 with latest NextAuth.js examples / best practices / links

다음 거 있어요?js 프로그램, 사용자/인증 지원을 추가하시겠습니까?그만 봐!당신은 NextAuth.js, 당신이 가장 좋아하는 공급자(구글, Github 등)의 OAuth 키와 약 5분의 시간이 필요합니다!
시작하기 전에 우리가 해야 할 일을 총결해 봅시다.
본 강좌에서 우리는 다음과 같은 몇 가지 일을 할 것이다.

구글 개발자 포털

에서 OAuth 키 만들기

Nextuth 설치 및 구성우리 다음으로 들어와.js 응용 프로그램

일부 페이지 루트와api 루트 보호

우리 시작합시다!

선결 조건

나는 네가 이미 다음과 같은 조건을 갖추고 있다고 가정한다.
구글 계정

기존 다음js app

구글 OAuth 설정

따라서 우선 Google에서 OAuth 클라이언트 ID와 기밀을 받아야 합니다.다음.js는 애플, Discord, 페이스북, Github, Google, LinkedIn, Okta, 슬랙, Twitch, 트위터 등 대량의 OAuth 공급자에 대한 지원을 내장하고 있으며, docs - providers에서 더 많은 것을 찾을 수 있습니다.여기에는 모든 공급자가 필요로 하는 OAuth 키를 검색하는 방법에 대한 설명이 있지만 Google을 설정하는 방법에 대해 자세히 설명합니다.
먼저 https://console.developers.google.com/apis/credentials을 방문하십시오.
Google 개발자 콘솔에 프로젝트를 설정하지 않았거나, 프로그램에 새 프로젝트를 만들고 싶으면, 계속해서 왼쪽 상단에서 프로젝트 개요를 선택한 다음 '프로젝트 만들기' 를 누르십시오.

프로젝트를 작성한 후 왼쪽 주 메뉴의 API 및 서비스 -> 자격 증명 섹션에 있는지 확인합니다.거기서 "증빙서류 만들기"를 선택하고 "OAuth 클라이언트 ID"를 선택하십시오.

If you've not yet gotten the OAuth consent screen setup for your domain, you'll have to do that first - just enter a name for the app and the domain you'll be using for it. For Internal applications there is no Google verification process necessary, but it will also only allow members of your G Suite domain to use the application. Public applications must have the domain verified by Google before large scale sign-in is allowed - OAuth is limited to 100 "sensitive scope logins" i.e. test logins until the consent screen is verified by Google.

그런 다음 만들려는 OAuth 클라이언트 ID의 유형으로 웹 응용 프로그램을 선택하고 이름을 지정합니다.또한 승인된 Javascript 소스와 URI 리디렉션에 대한 URI를 입력해야 합니다.
승인된 Javascript 소스 코드는 애플리케이션의 도메인(예: myapp.domain.com)에 불과합니다.
권한 재지정 URI는 사용자가 설정한 공급자에 따라 다르지만 Nextuth에 적용됩니다.js의 기본 설정은 구글을 OAuth 공급자로 사용하는 것입니다. URI 리셋은 https://myapp.domain.com/api/auth/callback/google과 유사합니다.분명히 프로그램이 실행되는 조건에 따라 필드를 조정해야 한다. 중요한 부분은 /api/auth/callback/google 경로이다.

"만들기"를 누르면 OAuth 클라이언트 ID와 OAuth 기밀을 받을 수 있습니다!반드시 이것들을 어딘가에 보존해야 한다. 왜냐하면 우리는 나중에 그것들이 필요하기 때문이다.

다음.js 설치

다음에는 Nextuth를 설치해야 합니다.우리 다음으로 들어와.js 응용 프로그램.프로젝트 디렉토리로 이동하여 next-auth을 설치하십시오.

cd /opt/dev/my-nextjs-app
npm i -s next-auth

이제 우리는 다음 번을 맞이할 준비가 되었다.js 설치!

초기 설정

현재 모든 선결 조건과 의존 항목이 있습니다.Nextuth 프로필을 가져옵니다.js 설치.우선 프로젝트 디렉터리의 루트 디렉터리가 없으면 .env 파일이 필요합니다..env 파일에는 다음이 포함되어야 합니다.

NEXTAUTH_URL=https://myapp.domain.com
GOOGLE_ID=abc123
GOOGLE_SECRET=abc123

The NEXTAUTH_URL is the URL at which your application will be running. You can set multiple URLs for different environments by setting up multiple .env files, like .env.production, .env.development, etc. The same is possible in almost any hosting provider's environment variables setup section (i.e. with Netlify or Vercel, etc.). The GOOGLE_ID and GOOGLE_SECRET are our OAuth keys we received from the Google developer console earlier!

다음, 다음을 만듭니다.js API 인증 라우트: pages/api/auth/[...nextauth].js.이 파일에는 적어도 다음이 포함되어야 합니다.

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

const options = {
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET
    }),
  ],
  debug: false
}

export default (req, res) => NextAuth(req, res, options)

여기서는 더 많은 것을 설정할 수 있지만, 이것은 JWT의 OAuth 인증을 기반으로 하는 최저 요구사항입니다.더 많은 설정 옵션은 docs - configuration에서 찾을 수 있고 이 파일의 전체 주석 버전인 here에서 찾을 수 있습니다.
당신들 중 눈이 예민한 사람들은 우리가 여기에 어떤 종류의 데이터베이스도 지정하지 않았다는 것을 알아차릴 것이다.이것은 몇 가지 일을 의미한다.
세션 처리 의 경우 기본적으로

JWT 지원이 활성화됩니다.

사용자

의 영구 데이터베이스가 없습니다.
사용자/계정을 데이터베이스에 영구적으로 저장하려면nextuth를 누르십시오.js는 sqlite를 테스트나 기타 각종 어댑터(예를 들어 MySQL,Postgres,MongoDB(TypeORM을 통해),FaunaDB,Firebase,DynamoDB와Prisma)를 추가하는 데 매우 쉽게 한다.데이터베이스에 대한 자세한 내용은 해당 데이터베이스 docs - adapters을 참조하십시오.
다음은 다음 공급자에서 응용 프로그램을 포장해야 하기 때문에 pages/_app.js을 켜거나, 아직 없으면 하나를 만듭니다.
결과는 다음과 같아야 한다.

import { Provider } from 'next-auth/client'

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

전체 응용 프로그램을 이 공급자에 패키지함으로써 React Context를 사용하여 응용 프로그램의 모든 페이지/구성 요소에 useSession 연결을 제공하고 세션 상태를 공유할 수 있습니다.
믿거나 말거나 Nextuth를 사용하여 기본 Google OAuth 설정을 수행하는 데 필요한 모든 내용입니다.js!
기본적으로 이 라이브러리는 기본 로그인/로그아웃 페이지를 포함하기 때문에 작성할 필요가 없습니다.만약 당신이 이것들을 맞춤형으로 제작하고 싶다면 당연히 지원해야 한다.자세한 내용은 here을 참조하십시오.
이 강좌에서 우리가 해야 할 마지막 일은 페이지에 대한 접근을 인증만 받은 사용자로 제한하는 방법을 보여 주는 것이다.
현재 사용자는 Google 프로그램에서 모든 노선을 탐색할 수 있으며, 로그인 상태와 상관없이 모든 렌더링을 받을 수 있습니다. 왜냐하면 Google은 아직 조건부로 렌더링을 하지 않았기 때문입니다.

페이지 액세스 제한

우선, 작은 AccessDenied 구성 요소를 구축합니다. 보호된 루트에 착륙했는지, 로그인하지 않았는지 사용자에게 보여 드리겠습니다.이것은 그들에게 접근 권한이 없다는 것을 알려주고 로그인할 기회를 줄 것이다.
이 이름을 말해 봅시다. components/accessDenied.js

import { signIn } from 'next-auth/client'

export default function AccessDenied () {
  return (
    <>
      <h1>Access Denied</h1>
      <p>
        <a href="/api/auth/signin"
           onClick={(e) => {
           e.preventDefault()
           signIn()
        }}>You must be signed in to view this page</a>
      </p>
    </>
  )
}

마지막으로 보호하고자 하는 페이지에서 useSession에서 next-auth 갈고리를 가져오고 페이지 내용으로 돌아가기 전에 세션을 검사합니다. 사용할 수 있는 세션이 없으면 accessDenied.js 구성 요소를 표시합니다.

클라이언트 페이지

예제 보호된 클라이언트 렌더링 페이지(pages/index.js)는 다음과 같습니다.

import React from 'react'
import { useSession } from 'next-auth/client'
import Layout from '../components/layout'
import AccessDenied from '../components/access-denied'

export default function Page () {
  const [ session, loading ] = useSession()

  // When rendering client side don't display anything until loading is complete
  if (typeof window !== 'undefined' && loading) return null

  // If no session exists, display access denied message
  if (!session) { return  <Layout><AccessDenied/></Layout> }

  // If session exists, display content
  return (
    <Layout>
      <h1>Protected Page</h1>
      <p><strong>Welcome {session.user.name}</strong></p>
    </Layout>
  )
}

SSR 페이지

SSR 페이지의 예는 다음과 같습니다.

import { getSession } from 'next-auth/client'
import Layout from '../components/layout'
import AccessDenied from '../components/access-denied'

export default function Page ({ session }) {
  // If no session exists, display access denied message
  if (!session) { return  <Layout><AccessDenied/></Layout> }

  // If session exists, display content
  return (
    <Layout>
      <h1>Protected Page</h1>
      <p><strong>Welcome {session.user.name}</strong></p>
    </Layout>
  )
}

export async function getServerSideProps(context) {
  const session = await getSession(context)

  return {
    props: {
      session
    }
  }
}

API 라우팅

마지막으로 보호된 API 라우팅 예는 다음과 같습니다.

// pages/api/protected.js
import { getSession } from 'next-auth/client'

export default async (req, res) => {
  const session = await getSession({ req })

  if (session) {
    res.send({ content: 'This is protected content. You can access this content because you are signed in.' })
  } else {
    res.send({ error: 'You must be signed in to access this api route' })
  }
}

결론

자, 여러분, 약속한 5분보다 길지 않았으면 좋겠어요!
예를 들어, 이 예는 Vercel, 예를 들어Nextuth에 배치할 수 있다.js는 그들의 서버api 함수와 호환됩니다.
만약 내가 언급하지 않았다면, 내가 소개에서 언급한 많은 OAuth 제공 프로그램의 내장 지원 외에, 전자 우편을 기반으로 하는'magic link'로그인의 내장 지원과, 그리고 사용자 정의 OAuth 제공 프로그램과 다른 사용자 정의 인증 제공 프로그램의 옵션을 추가하는 것, LDAP의 great tutorial을 어떻게 사용하는지 상세하게 설명하는 것을 포함한다.
고마워요
및
그리고 모든 우수한 공헌자, 그들의 위대한 일을 위해 NextAuth.js!이 글은 주로 예시 프로그램과 내가 Nextuth를 사용한 경험을 바탕으로 한다.다음 단계 2-3의 js.js 응용 프로그램으로 지난 몇 달 동안 프로젝트에 기여했습니다.
너는 정부의 다음 페이지에서 더 많은 정보를 찾을 수 있다.js 예시 프로그램 here.

한층 더 읽다

NextAuth.js Homepage

NextAuth.js OAuth Providers

NextAuth.js Database Adapters

next-auth npm

next-auth-example

FAQ