04·실습·15분

코드에서 인증 다루기

두 개의 토큰을 절대 섞지 마세요. API 키는 프로젝트를 식별하며 모든 요청에 실립니다. 최종 사용자 액세스 토큰은 로그인한 한 사람을 식별하며 그 사용자로서 동작하는 호출에만 X-Access-Token 헤더로 실립니다.

가입

const res = await client.auth.signup({ email, password })

응답은 프로젝트 설정에 따라 다릅니다. 이메일 인증이 켜져 있으면 아직 토큰이 없습니다. verification_required가 true이고 사용자는 이메일로 6자리 코드를 받습니다. UI는 코드 입력 폼을 보여주고 그 코드로 verify-email을 호출해야 합니다. 인증이 꺼져 있으면 계정을 바로 쓸 수 있으니 로그인으로 보내세요.

로그인

const login = await client.auth.login({ email, password })

역시 두 가지 성공이 있습니다. login.tokens가 있으면 세션이 생긴 것입니다. mfa_required가 true이면 대신 짧은 수명의 challenge_token을 쥐고 있는 것이니, 인증 앱 코드 폼을 보여주고 mfa/challenge를 호출해 토큰으로 교환하세요.

세션 유지

쿠키는 앱의 것입니다. 페이지 스크립트가 읽지 못하도록 액세스 토큰을 httpOnly로 저장하세요.

headers.append('Set-Cookie', serializeSessionCookie(login.tokens.AccessToken, {
    maxAge: login.tokens.ExpiresIn,
}))

경로 보호

sessionFromCookies(cookieHeader)는 네트워크 없이 토큰을 로컬에서 디코딩해 { status, user }를 돌려줍니다. 모든 내비게이션에 쓰세요. 민감한 동작 전에는 getSession({ accessToken, mode: 'verified' })로 다시 확인하세요. 게이트웨이에 묻고 취소를 감지합니다. 페이지 로드는 낙관적으로, 결제와 계정 변경은 검증으로.

DontCode에서는

비밀번호 해싱, 인증 이메일, MFA 시크릿, 로그인 속도 제한은 모두 플랫폼의 인증 서비스에서 일어납니다. 여러분의 코드는 폼을 그리고 응답에 따라 분기합니다. 규칙 하나: 제출 한 번은 "완료"나 "한 단계 더"를 돌려줄 수 있습니다. 왕복 한 번으로 끝난다고 가정하지 마세요.

더 알아보기

이해도 확인

  1. 1.최종 사용자 액세스 토큰을 싣는 헤더는?

  2. 2.login()이 mfa_required: true로 반환됐습니다. 무엇을 갖고 있을까요?

  3. 3.검증 모드의 getSession은 언제 써야 할까요?

과제

백엔드 프로젝트

코드에서 client.auth.signup(또는 POST /api/v1/auth/signup)으로 테스트 사용자를 가입시키세요. 새 사용자가 프로젝트에 생기면 확인이 통과됩니다. 이 레슨에서는 인증까지 마칠 필요는 없습니다.