다음.Next Auth 및 AWS Cognito를 사용하여 js 인증
먼저 AWS Amplify Auth 클래스의 모든 사용법을 삭제했습니다.나는 본래 사용자 정의 사용자 인터페이스를 만들려고 하였으나, 지금 보니, 너는Nextuth를 사용할 때만 위탁 관리 사용자 인터페이스를 사용할 수 있을 것 같다.js (맞춤형 공급자가 아니라면 https://next-auth.js.org/providers/credentials#example-ui.이것은 응용 프로그램/사이트의 삽입식 신분 검증이어야 하기 때문에 매우 의미가 있다.하지만 제가 틀렸다면 바로잡아 주세요.
아마존
인증 흐름에는 Amazon Cognito 사용자 풀이 필요합니다.설정하지 않은 경우 다음 단계에 따라 하나를 추가합니다.
애플리케이션 클라이언트 추가
이제 왼쪽 메뉴에서 도메인 이름을 선택하려면 도메인을 설정해야 합니다.
거의 다 왔다😓, 응용 프로그램 클라이언트 설정 선택
이것이 바로 모든 필요한 설정이며, 마지막 단계는 관련된 것을 얻는 것이다.NextAuth에 필요한 환경 변수입니다.js.왼쪽 메뉴에 있는 프로그램 클라이언트로 돌아가서 프로그램 클라이언트 id를 기록합니다. "자세한 정보 보이기"를 선택하고 프로그램 클라이언트에게 비밀을 지키십시오.
다음.js
이제 재미있는 부분을 보도록 하겠습니다.Nextuth를 기존 또는 새 프로젝트에 설치합니다.js 의존 관계:
yarn add next-auth
// or
npm install next-auth
에반 선생
js를 추가하기 전에 환경 변수를 설정합니다.프로젝트의 루트 디렉터리에
.env.local 파일 추가하기COGNITO_CLIENT_ID=*App client id*
COGNITO_CLIENT_SECRET=*App client secret*
COGNITO_DOMAIN=*Domain name*
자세한 내용은 Cognito>Manage user pools에 로그인하여 확인할 수 있습니다.
API 라우팅
documentation에
[...nextauth].js라는 파일을 추가합니다.import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
export default NextAuth({
providers: [
Providers.Cognito({
clientId: process.env.COGNITO_CLIENT_ID,
clientSecret: process.env.COGNITO_CLIENT_SECRET,
domain: process.env.COGNITO_DOMAIN,
})
],
debug: process.env.NODE_ENV === 'development' ? true : false
})
현재
pages/api/auth 의 모든 요청은 로그인, 로그아웃 등 Nextuth에서 처리됩니다.다음 갈고리 사용.
내부
api/auth/*에서 모든 코드를 다음 코드로 교체합니다.import Head from 'next/head'
import Link from 'next/link'
import { signIn, signOut, useSession } from 'next-auth/client'
export default function Home() {
const [session, loading] = useSession()
return (
<div>
<Head>
<title>Authentication with NextAuth and AWS Cognito</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-md w-full space-y-8 flex items-center flex-col">
<a>
<div className="flex-shrink-0 flex items-center bg-orange-500 h-20 w-20 border-radius p-2 font-bold text-4xl">
dlw
</div>
</a>
{!session &&
<>
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
Example NextAuth Sign In
</h2>
<button
type="submit"
className="inline-flex items-center justify-center w-1/2 mt-12 rounded-md border border-transparent px-5 py-3 bg-gray-900 text-base font-medium text-white shadow hover:bg-black focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-rose-500 sm:px-10 disabled:opacity-50 disabled:cursor-not-allowed"
disabled={loading}
onClick={() => signIn('cognito', {
callbackUrl: `${window.location.origin}/protected`
})}
>
Sign In
</button>
</>
}
{session &&
<>
<h1 className="my-6 text-center text-3xl font-extrabold text-gray-900">
Welcome, {session.user.name ?? session.user.email}
</h1>
<nav>
<Link href="/protected">
<a className="text-orange-500 hover:bg-black hover:text-white">Protected Page</a>
</Link>
</nav>
<button
type="submit"
className="inline-flex items-center justify-center w-1/2 mt-12 rounded-md border border-transparent px-5 py-3 bg-gray-900 text-base font-medium text-white shadow hover:bg-black focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-rose-500 sm:px-10 disabled:opacity-50 disabled:cursor-not-allowed"
disabled={loading}
onClick={() => signOut({
callbackUrl: `${window.location.origin}`
})}
>
Sign Out
</button>
</>
}
</div>
</div>
</main>
</div>
)
}
onClick={() => signIn('cognito', {
callbackUrl: `${window.location.origin}/client-protected`
})}
이 때 우리는 등록이나 로그인을 테스트할 수 있다.개발 서버
pages/index.js를 실행하고 http://localhost:3000/로 이동합니다.로그인을 선택하면 기존 계정으로 로그인하거나 새 계정을 등록할 수 있습니다.세션 공급자
다중 페이지 프로그램에서 세션 공급자를 추가해야 합니다.이렇게 하면 세션 상태가 페이지 간에 공유될 수 있습니다.
which improves performance, reduces network traffic and avoids component state changes while rendering -
업데이트
yarn run dev:import { Provider } from 'next-auth/client'
import "tailwindcss/tailwind.css";
function MyApp({ Component, pageProps }) {
return (
<Provider session={pageProps.session}>
<Component {...pageProps} />
</Provider>
)
}
export default MyApp
pages/_app.js를 추가하고 Provider 구성 요소에서 기본 애플리케이션 구성 요소를 패키지화합니다. <Provider session={pageProps.session}>
<Component {...pageProps} />
</Provider>
보호 페이지
보호된 페이지의 경우/pages 디렉토리에
import { Provider } from 'next-auth/client'라는 새 페이지를 추가합니다(실제 페이지 이름은 중요하지 않음).import Head from 'next/head'
import Link from 'next/link'
import { getSession } from 'next-auth/client'
function Protected() {
return (
<div>
<Head>
<title>Authentication with NextAuth and AWS Cognito</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-md w-full space-y-8 flex items-center flex-col">
<a>
<div className="flex-shrink-0 flex items-center bg-orange-500 h-20 w-20 border-radius p-2 font-bold text-4xl">
dlw
</div>
</a>
<h1 className="my-6 text-center text-3xl font-extrabold text-gray-900">Client Protected</h1>
<nav>
<Link href="/">
<a className="text-orange-500 hover:bg-black hover:text-white">Home</a>
</Link>
</nav>
<div className="prose">
<p>Faucibus commodo massa rhoncus, volutpat. <strong>Dignissim</strong> sed <strong>eget risus enim</strong>. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit. Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. <a href="#">Mattis mauris semper</a> sed amet vitae sed turpis id.</p>
</div>
</div>
</div>
</main>
</div>
)
}
export default Protected
export async function getServerSideProps(context) {
const { res } = context;
const session = await getSession(context)
if (!session) {
res.writeHead(302, {
Location: "/",
});
return res.end();
}
return {
props: { session }
}
}
저장소: https://github.com/dwhiteGUK/dlw-next-auth-cognito
프로덕션에 배포
생산 환경에 배치하기 전에 우리는 환경 변수에 하나를 추가해야 한다
protected.js.또한 이전 환경 변수를 생산 환경에 추가해야 한다나는 Vercel에서 다음 경기의 대부분 시간을 주재했다.js 사이트는 프로젝트 설정에 추가됩니다.
Reference
이 문제에 관하여(다음.Next Auth 및 AWS Cognito를 사용하여 js 인증), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dlw/next-js-authentication-with-next-auth-and-aws-cognito-3o2b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
