inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Next + React Query로 SNS 서비스 만들기

NextAuth를 활용한 소셜 로그인 시 authorization code 발급 방법

528

박지수 Jisu Park

작성한 질문수 6

0

안녕하세요 강의 수강 후에 자체 프로젝트를 진행하고 있는데 소셜 로그인 처리 중 궁금한 점이 있어 질문 드립니다.

기존에는 Google, Naver, Kakao, Facebook 등 5가지 소셜 로그인을 각각 OAuth 리디렉션 방식으로 구현했으나, 이번에는 NextAuth를 활용하여 간편하게 통합적으로 구현하려고 합니다.

소셜 로그인은 authorization code 발급용으로만 사용하고 실제 access, refresh token 발급은 자체 서버에서 처리를 하려고 합니다. 따라서 인가 과정만 next auth를 활용하고 callbacks 내부에서 인가 코드를 전달하여 access token 발급 과정을 진행하려 했습니다.

/api/auth/[...nextauth]/route.ts


const authOptions = {
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID ?? "",
      clientSecret: process.env.GOOGLE_SECRET ?? "",
    }),
  ],
  callbacks: {
    async signIn({ account, profile }: any) {
      if (account.provider === "google") {
        const response = await fetch(
          `${process.env.GATEWAY_SERVER_URL}/auth/v1`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              devicetype: "1",
            },
            body: JSON.stringify({
              sns_type: "GOOGLE",
              key: 인가코드,
            }),
          }
        );
       
      }
      return true; // Do different verification for other providers that don't have `email_verified`
    },
  },
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

하지만 알아본 결과 NextAuth의 callbacks에서는 access token이 발급되고 authorization code는 받을 수 없게 되어있는 것 같은데 authorization code 발급용으로만 사용하기에는 next auth를 사용하는것이 적합하지 않은 것인지 궁금합니다.

또한 authorization code를 받을 수 있는 방법이 있다면 알려주시면 감사하겠습니다!

 

react next.js react-query next-auth msw

답변 2

0

제로초(조현영)

access 토큰과 비교해서, auth 토큰의 용도가 무엇인가요??

0

박지수 Jisu Park

백엔드 쪽에서 인증서버가 구성되어 있는 상황인데 프론트에서 발급받은 auth 토큰으로

백엔드 인증 서버에서 https://oauth2.googleapis.com/token api 를 호출해서 access-token을 만드는 것으로 알고 있습니다.

프론트에서는 5가지 소셜 로그인 기능을 쉽게 붙이기 위해 NextAuth를 활용해보려 하는 상황인데 현 상황에 적합한지 궁금합니다.

0

제로초(조현영)

거기서 받는 access token은 구글 api 사용 용도입니다. 그게 아닌 토큰은 직접 만드셔야 하고요. 넥스트에서는 로그인 성공 후 알아서 쿠키에 next auth token을 만들어줍니다. 그게 브라우저에 전송되어있으면 알아서 로그인이 유지됩니다.

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

박지수님의 질문에 대해 유사한 상황에서의 답변을 찾아보았으나, NextAuth를 활용하여 소셜 로그인 시 authorization code를 발급받는 방법에 대해서는 구체적인 답변을 제공한 기존 질문이 없었습니다.

NextAuth는 주로 액세스 토큰이나 리프레시 토큰을 사용하여 인증 처리를 하는 경우에 많이 사용되며, 일반적인 사용 사례에서는 인가 코드(authorization code)를 직접 다루는 것이 아닌 내부적으로 이를 처리합니다. 따라서, 인가 코드를 직접적으로 다루길 원하는 특수한 경우에는 NextAuth 설정 또는 사용 방식을 커스텀해야 할 수 있습니다.

NextAuth의 공식 문서(NextAuth.js 공식 문서) 또는 관련 커뮤니티에서는 일반적으로 “signIn” 콜백 내에서 사용자 정의 로직을 수행하도록 권장하며, 여기서는 주로 이미 발급 받은 access token을 사용합니다. 그러나 authorization code를 직접적으로 처리하고 싶은 경우, NextAuth의 기본 동작과는 다소 차이가 발생할 수 있습니다.

특정 소셜 로그인에서만 authorization code를 받아 자체 서버에서 토큰을 발급하려는 경우, 소셜 로그인 제공자의 문서를 참조하여, NextAuth 외의 다른 방법을 검토해볼 필요가 있습니다. 다른 방법으로는, 각 소셜 로그인 제공자의 OAuth 인증 프로세스를 직접 구현하여, 리디렉션 URI를 통해 인가 코드를 받는 방법이 있겠습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

캡처링부분 질문있습니다.

0

76

2

깃에 소스코드를 찾을 수 없습니다.

0

114

2

useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩

0

98

1

import 파일 경로를 찾지 못 해서 에러가 발생합니다.

0

111

2

css 라이브러리 추천 부탁드립니다

0

141

2

팔로우 추천 목록이 빈 배열로 들어옵니다.

0

133

1

게시물 업로드 시 userId가 undefined로 들어가는 오류

0

119

1

useSuspenseQuery 사용 시 SSR 401 이슈 관련

0

173

1

리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??

0

186

3

폴링이 필요없는 이유

0

93

2

next Request Memoization과 react cache

0

110

2

seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?

0

84

2

next.js 서버fetch 에러 fallback ui 구현 방법

0

173

2

프레임워크 여론 파악법

0

125

2

필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??

0

103

2

서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.

0

102

2

template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈

0

66

2

Auth.js 사용 시 authorize 함수가 호출되지 않습니다

0

132

2

next.js 에서 로그인에 관하여

0

139

1

Next의 route handler에 대한 질문이 있습니다.

0

101

2

게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다

0

99

2

프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.

0

85

2

vanilla-extract 못찾는 문제

0

230

2

fetch 캐싱과 revalidate 관련

0

86

2