JWT

JWT Setting 및 소셜 로그인 연동방법(FACEBOOK, google, github)

1. JWT란?
   JSON Web Token (JWT) 은 웹표준 (RFC 7519) 으로서 두 개체에서 JSON 객체를 사용하여 가볍고 자가수용적인 (self-contained) 방식으로 정보를 안전성 있게 전달해줍니다.

2. 사용이유

   • 다양한 소셜 로그인 연동 및 쉬운 사용법

   • JWT Quick Start를 통해서 쉽게 구현

   • 비밀번호 찾기(문자와 이메일)와 이중 인증 또한 가능

3. 각 소셜로그인 리다이렉트 url 설정

   • 구글

     • 사용자 인증정보 -> OAuth 2.0 클라이언트 ID -> 승인된 리디렉션 URL
     • url : https://dev-qfyt47dg.auth0.com/login/callback
     • OAuth 동의 화면 -> 승인된 도메인
     • url : auth0.com

   • 페이스북

     • 설정 -> 기본설정 -> 앱도메인
     • url : https://dev-qfyt47dg.auth0.com
     • Facebook 로그인 설정 -> 유효한 OAuth 리디렉션 URI
     • url : https://dev-qfyt47dg.auth0.com/login/callback

   • 깃허브

     • OAuth Apps -> Homepage URL
     • url : https://dev-qfyt47dg.auth0.com/

4. 추가할 파일

   1. auth_config.json

   {
       "domain": "dev-qfyt47dg.auth0.com",
       "clientId": "*********"
   }

   2. react-auth0-spa.js

   // src/react-auth0-spa.js
   import React, { useState, useEffect, useContext } from "react";
   import createAuth0Client from "@auth0/auth0-spa-js";
   
   const DEFAULT_REDIRECT_CALLBACK = () =>
       window.history.replaceState({}, document.title, window.location.pathname);
   
   export const Auth0Context = React.createContext();
   export const useAuth0 = () => useContext(Auth0Context);
   ..........