컨텐츠로 건너뛰기

인증

인증 및 승인은 웹사이트 또는 앱에 대한 액세스를 관리하는 두 가지 보안 프로세스입니다. 인증은 방문자의 신원을 확인하는 반면, 승인은 보호 구역 및 자원에 대한 접근 권한을 부여합니다.

인증을 사용하면 사이트의 특정 영역을 로그인한 개인에 맞춰 사용자 정의할 수 있으며 개인 정보 또는 비공개 정보를 최대한 보호할 수 있습니다. 인증 라이브러리 (예: Lucia Auth, Auth.js, Clerk)는 이메일 로그인 및 OAuth 공급자와 같은 다양한 인증 방법을 위한 유틸리티를 제공합니다.

이러한 백엔드 서비스에 대한 전용 가이드에서 Supabase로 인증을 추가하거나 Firebase로 인증을 추가하는 방법을 알아보세요.

Lucia는 훌륭하게 Astro를 지원하는 프레임워크에 구애받지 않는 세션 기반 인증 라이브러리입니다.

원하는 패키지 관리자를 사용하여 Lucia를 설치하세요.

Terminal window
npm install lucia

Lucia의 “Astro 시작하기” 가이드를 사용하여 Lucia를 어댑터로 초기화하고 사용자 및 세션을 저장할 데이터베이스를 설정하세요.

Auth.js는 프레임워크에 구애받지 않는 인증 솔루션입니다. Astro용 커뮤니티 프레임워크 어댑터 auth-astro를 사용할 수 있습니다.

선호하는 패키지 관리자로 astro add 명령을 사용하여 auth-astro 통합을 추가하세요.

Terminal window
npx astro add auth-astro

auth-astro를 수동으로 설치하려면 패키지 관리자로 필요한 패키지를 설치하세요.

Terminal window
npm install auth-astro @auth/core@^0.18.6

그런 다음 integrations 속성을 사용하여 astro.config.* 파일에 통합을 적용합니다.

astro.config.mjs
import { defineConfig } from 'astro/config';
import auth from 'auth-astro';
export default defineConfig({
// ...
integrations: [auth()],
});

프로젝트의 루트 디렉터리에 auth.config.mjs 파일을 생성합니다. 필요한 환경 변수와 함께 지원하려는 인증 공급자 또는 메서드를 추가하세요.

auth.config.mjs
import GitHub from '@auth/core/providers/github';
import { defineConfig } from 'auth-astro';
export default defineConfig({
providers: [
GitHub({
clientId: import.meta.env.GITHUB_CLIENT_ID,
clientSecret: import.meta.env.GITHUB_CLIENT_SECRET,
}),
],
});

아직 존재하지 않는 경우 프로젝트 루트에 .env 파일을 생성합니다. 다음 두 가지 환경 변수를 추가합니다. AUTH_SECRET은 최소 32자의 비공개 문자열이어야 합니다.

.env
AUTH_TRUST_HOST=true
AUTH_SECRET=<my-auth-secret>

script 태그 또는 클라이언트 측 프레임워크 컴포넌트에서 auth-astro/client 모듈을 사용하여 로그인 및 로그아웃 버튼을 추가할 수 있습니다.

src/pages/index.astro
---
import Layout from 'src/layouts/Base.astro';
---
<Layout>
<button id="login">Login</button>
<button id="logout">Logout</button>
<script>
const { signIn, signOut } = await import("auth-astro/client")
document.querySelector("#login").onclick = () => signIn("github")
document.querySelector("#logout").onclick = () => signOut()
</script>
</Layout>

getSession 메서드를 사용하여 사용자 세션을 가져올 수 있습니다.

src/pages/index.astro
---
import Layout from 'src/layouts/Base.astro';
import { getSession } from 'auth-astro/server';
const session = await getSession(Astro.request);
---
<Layout>
{
session ? (
<p>Welcome {session.user?.name}</p>
) : (
<p>Not logged in</p>
)
}
</Layout>

Clerk는 임베드 가능한 UI, 유연한 API, 관리자 대시보드로 구성된 완벽한 제품군으로 사용자를 인증하고 관리할 수 있습니다. Astro용 공식 Clerk SDK를 사용할 수 있습니다.

원하는 패키지 관리자를 사용하여 @clerk/astro를 설치합니다.

Terminal window
npm install @clerk/astro

Clerk의 자체 Astro 빠른 시작 가이드를 따라 Astro 프로젝트에서 Clerk 통합 및 미들웨어를 설정하세요.

Clerk는 사용자의 인증 상태에 따라 페이지의 표시 여부를 제어할 수 있는 컴포넌트를 제공합니다. 로그아웃한 사용자에게는 로그인한 사용자에게 제공되는 콘텐츠 대신 로그인 버튼을 표시합니다:

src/pages/index.astro
---
import Layout from 'src/layouts/Base.astro';
import { SignedIn, SignedOut, UserButton, SignInButton } from '@clerk/astro/components';
---
<Layout>
<SignedIn>
<UserButton />
</SignedIn>
<SignedOut>
<SignInButton />
</SignedOut>
</Layout>

또한 Clerk를 사용하면 미들웨어를 통해 서버에서 경로를 보호할 수 있습니다. 보호할 경로를 지정하고 인증되지 않은 사용자에게 로그인하라는 메시지를 표시할 수 있습니다:

src/middleware.ts
import { clerkMiddleware, createRouteMatcher } from '@clerk/astro/server';
const isProtectedRoute = createRouteMatcher([
'/dashboard(.*)',
'/forum(.*)',
]);
export const onRequest = clerkMiddleware((auth, context) => {
if (!auth().userId && isProtectedRoute(context.request)) {
return auth().redirectToSignIn();
}
});
기여하기

여러분의 생각을 들려주세요!

GitHub Issue 생성

우리에게 가장 빨리 문제를 알려줄 수 있어요.

커뮤니티