Next.js와 Auth.js 소셜 로그인 세션 유지를 위해 토큰 갱신 및 관리하기 (DB / JWT 방법)

소셜 로그인 기능 구현 이후 작업 목록

1. 토큰 관리 (DB or JWT 방식)

2. 세션 유지 및 갱신 처리 (Refresh token)

3. 세션 만료될 경우 처리

OAuth 이란?

로그인 세션 유지 및 토큰 갱신 작업을 해야 하는 이유

{
	"access_token": "로그인 유효성을 입증하는 키",
	"refresh_token": "액세스 토큰을 갱신할 때 쓰이는 키, 보통 만료 시간이 더 길거나, 만료되지 않음(서버 설정에 따라 다름)",
	"expires_at": "액세스 토큰 만료 시간 (ISO 형식)"
}

• 토큰(Token)은 사용자가 인증된 후, 서버가 발급하여 클라이언트에게 전달하는 작은 데이터 조각입니다. JWT(JSON Web Token) 형식으로 사용되며, 서버와 클라이언트 간의 인증 정보를 안전하게 전달하는데 사용됩니다.

• 세션(Session)은 사용자가 웹 사이트와 상호작용하는 동안 서버에 사용자 정보를 저장하는 방식, 일반적으로 하나의 세션은 사용자가 웹 사이트에 방문해 활동을 시작하고 브라우저를 닫거나 세션이 만료될 때까지의 기간을 나타냅니다.

Refresh Token Rotation으로 세션 유지 및 토큰 관리하기

JWT 방식으로 토큰 관리 및 세션 유지하기

• Auth 설정에 session: { strategy: 'jwt' }를 추가하면 jwt 콜백을 사용할 수 있습니다.

• jwt 콜백에서 토큰을 반환하면 session 콜백의 파라미터 token으로 받을 수 있습니다.

• session 콜백에서 만료시간을 확인하여 시간이 지났다면 토큰 갱신합니다.

export const { handlers, signIn, signOut, auth } = NextAuth({
	// jwt 설정 활성화
	session: { strategy: 'jwt' }
	providers: [
    Google({...}),
  ],
	callbacks: {
		// jwt에서 token 저장
		async jwt({ account }) {
			token = account.accessToken;
			...
			
			retrun token;
		},
		async session({ session, token }) {
		  // 만료시간 확인
		  if (token.expires_at * 1000 < Date.now()) {
			  ... // 토큰 갱신 코드
		  }
		      
			return session;
		}
});

1. Flow chart

2. 타입 설정

// types.d.ts

declare module "next-auth" {
  interface Session {
	  // 세션 연장 처리에 실패할 경우, 이를 통해 로그아웃을 처리함
    error?: "SessionExpired"
  }
}
 
declare module "next-auth/jwt" {
  interface JWT {
    access_token: string
    expires_at: number
    refresh_token?: string
    // 세션 연장 처리에 실패할 경우, 실패 여부를 세션으로 넘기기 위해 추가
    error?: "SessionExpired"
  }
}

3. 응답 토큰 데이터

// auth.ts

export const {
  handlers,
  signIn,
  signOut,
  auth,
  unstable_update: update,
} = NextAuth({
  adapter: customPrismaAdapter(prisma),
  providers: [
    Google({...}),
    Kakao({...}),
    Naver({...}),
    Apple({...}),
  ],
  callbacks: {
  ...
  },
});

{
  "user": {
    "name": "사용자 이름",
    "email": "사용자 이메일",
    "image": "사용자 프로필 이미지"
  },
  "access_token": "로그인 유효성을 입증하는 키",
  "refresh_token": "액세스 토큰을 갱신할 때 쓰이는 키, 보통 만료 시간이 더 길거나, 만료되지 않음(서버 설정에 따라 다름)",
  "expires_at": "액세스 토큰 만료 시간 (ISO 형식)"
}

4. auth 설정

// auth.ts

export const {
  handlers,
  signIn,
  signOut,
  auth,
  unstable_update: update,
} = NextAuth({
	// jwt 사용할 수 있도록 설정하기
  session: { strategy: 'jwt' },
  // 로그인과 회원가입을 동시에 처리하기 위해 어댑터 추가함 jwt 방식을 사용하는데 있어서 어댑터 설정은 필수가 아님
  // 프로젝트 로직 구현 중에 내장 함수의 호환 문제가 발생하여 기존 PrismaAdapter를 확장하여 사용함
  adapter: customPrismaAdapter(prisma),
  providers: [
    Google({...}),
    Kakao({...}),
    Naver({...}),
    Apple({...}),
  ],
  callbacks: {
    async jwt({ token, account }) {
	    // 로그인할 때만 account 값이 존재함, 응답 받은 account 정보를 token에 저장
      if (account) {
        token.provider = account.provider;
        token.providerAccountId = account.providerAccountId;
        token.refresh_token = account.refresh_token as string;
        token.access_token = account.access_token;
        token.expires_at = account.expires_at;
      }

      return token;
    },
    async session({ session, token }) {
      // 토큰 만료 여부 확인 및 백그라운드 토큰 갱신
      if (token.expires_at && Date.now() / 1000 >= Number(token.expires_at)) {
        await updateOauthToken(token);
      }

      return {
        ...session,
        error: token.error,
      };
    },
  },
});

5. Refresh Token Rotation 을 적용한 토큰 갱신 함수 작성

• 일부 제공자는 리프레시 토큰을 한 번만 발급하여 새로운 토큰을 받지 못한 경우가 있음, 그럴 경우에는 기존 토큰을 반환합니다.

• 새로운 refreshToken을 발급받으면 기존 토큰은 무효화됩니다.

• 발급받지 못한 경우에는 기존 refreshToken 토큰을 계속 사용할 수 있도록 합니다.

• refreshToken 만료 여부에 따라 getNewTokens() 의 fetch 응답 데이터 refreshToken 여부가 결정됩니다.

// token.ts

interface NewToken {
  refresh_token: string;
  access_token: string;
  expires_at: number;
}

interface ServiceEnvDict {
  [key: string]: {
    [key: string]: string;
  };
}

const serviceEnvDict: ServiceEnvDict = {
  google: {
    endpoint: 'https://oauth2.googleapis.com/token',
    clientId: process.env.AUTH_GOOGLE_ID,
    clientSecret: process.env.AUTH_GOOGLE_SECRET,
  },
	...
};

export async function getNewTokens(token: JWT): Promise<NewToken> {
  if (!token.provider || !token.refresh_token) {
    throw new Error('Missing token.provider or token.refresh_token');
  }

  const response = await fetch(serviceEnvDict[token.provider].endpoint, {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({
      client_id: serviceEnvDict[token.provider].clientId,
      client_secret: serviceEnvDict[token.provider].clientSecret,
      grant_type: 'refresh_token',
      refresh_token: token.refresh_token,
    }),
  });

  const newTokens = await response.json();

  if (!response.ok) throw newTokens;

  return {
    // 일부 제공자는 리프레시 토큰을 한 번만 발급하여 새로운 토큰을 받지 못한 경우가 있음, 그럴 경우에는 기존 토큰을 반환
    refresh_token: newTokens.refresh_token ?? token.refresh_token,
    access_token: newTokens.access_token,
    expires_at: Math.floor(Date.now() / 1000) + Number(newTokens.expires_in),
  };
}

6. 토큰 갱신 함수 처리하는 함수 작성

// token.ts

export async function updateOauthToken(token: JWT) {
  try {
    if (!token.email || !token.provider) {
      throw new Error('Missing token.email or token.provider');
    }

    // 새로운 토큰 발급
    const newTokens = await getNewOauthTokens(token);

    // 새로운 토큰 저장
    token.access_token = newTokens.access_token;
    token.expires_at = newTokens.expires_at;
    if (newTokens.refresh_token) {
      token.refresh_token = newTokens.refresh_token;
    }

    return token;
  } catch (error) {
    // 새 토큰을 발급하고 저장하는 게 실패하면 토큰 만료로 로그아웃 처리하기 위함
    console.error(error);
    token.error = 'SessionExpired'; 
    return token;
  }
}

7. 세션 만료 처리 및 로그아웃 로직 작성

// middleware.ts

const { auth } = NextAuth(authConfig);

export default auth(async req => {
	// 토큰 만료 되면 로그아웃 처리
  if (req.auth?.error === 'SessionExpired') {
    req.nextUrl.pathname = '/users/error/nonexistence'; // 로그인 만료 안내 페이지
    return NextResponse.next();
  }
});

DB 방식으로 토큰 관리 및 세션 유지하기

• Auth.js의 Adapter는 인증 라이브러리와 데이터베이스 간의 상호작용을 담당하는 함수 집합입니다. 주요 함수로는 findUserByEmail, createUser, updateUser, deleteUser 등이 있으며, 각 함수는 사용자의 정보를 조회, 생성, 수정, 삭제하는 데 사용됩니다.

• Adapter를 사용하려면 아래와 같이 계정의 토큰 정보(Account)를 저장할 수 있도록 DB 스키마도 세팅되어야 합니다.

• Auth 설정에서 Adapter 연결합니다.
• 로그인하면 자동으로 user를 찾아서 session 함수의 user 파라미터로 넘겨줍니다.

• session 콜백에서 user.id를 가지고 user의 토큰 정보를 포함한 계정을 조회합니다.

• session 콜백에서 만료 시간을 확인하여 시간이 지났다면 토큰 갱신합니다.

export const { handlers, signIn, signOut, auth } = NextAuth({
	// 어댑터 연결
  adapter: PrismaAdapter(prisma),
  providers: [
    Google({...}),
  ],
  callbacks: {
		async session({ session, user }) {
			// 쿼리로 조회
			const [googleAccount] = await prisma.account.findMany({
		      where: { userId: user.id, provider: "google" },
		  });
		  
		  // 만료 시간 확인
		  if (googleAccount.expires_at * 1000 < Date.now()) {
			  ... // 토큰 갱신 코드
		  }
		      
			return session;
		}
	}
}

마무리

As of today, there is no built-in solution for automatic Refresh Token rotation. This guide will help you to achieve this in your application. Our goal is to add zero-config support for built-in providers eventually. 

출처 : https://authjs.dev/guides/configuring-oauth-providers