[인스타그램 클론코딩] 웹에서 백엔드로 Cognito 토큰 전송

[인스타그램 클론코딩] 웹 로그인 구현, [인스타그램 클론코딩] 웹 구글 로그인 구현 포스트에서 Cognito로 부터 ID 토큰을 얻어왔습니다.

이 토큰을 백앤드에 API 요청을 할 때 같이 보내야 합니다.

어떻게 보낼 수 있을까요?

index.js

최상위 컴포넌트를 ApolloProvider 컴포넌트로 감싸줍니다.

그리고 ApolloProvider 컴포넌트에 입력되는 client객체를 통해서 전송될 토큰을 지정해 줄 수 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './Components/App';
import { ApolloProvider } from "@apollo/react-hooks";
import Client from './Apollo/Client';

import Amplify from 'aws-amplify'
import aws_exports from './aws-exports'
import { AuthProvider } from './Contexts/AuthContext';
Amplify.configure(aws_exports)

ReactDOM.render(
    <ApolloProvider client={Client}>
        <AuthProvider>
            <App />
        </AuthProvider>
    </ApolloProvider>
, document.getElementById('root'));

눈치 채신 분들도 있겠지만, ApolloProvider도 Context가 적용된 컴포넌트입니다. 그래서 ApolloProvider 컴포넌트 내부의 모든 컴포넌트는 @apollo/react-hooks 모듈의 useQuery, useMutation을 통해서 GraphQL 서버에 요청을 할 수 있는 것입니다.

참조: [인스타그램 클론코딩] AuthContext

 

ApolloProvider 컴포넌트도 @apollo/react-hooks 모듈에 속해 있죠. 아마도 useQuery, useMutation은 ApolloProvider 컴포넌트의 Context에 접근에서 작업을 수행하는 로직을 갖고 있을 것입니다.

Apollo/Client.js

이 ApolloClient 객체가 index.js의 ApolloProvider 컴포넌트의 client 속성에 입력됩니다.

ApolloClient 생성자의 request 속성은 GraphQL 요청을 하기 전에 요청을 가로채서 커스텀을 할 수 있는 함수가 입력되는 속성입니다. 

import ApolloClient from 'apollo-boost';
import { defaults, resolvers } from './LocalState';
import { Auth } from 'aws-amplify';

export default new ApolloClient({
    uri:"ENDPOINT",
    //uri: "http://7431c03e.ngrok.io/dev/apollo",
    clientState: {
        defaults: defaults,
        resolvers: resolvers
    },
    request: async operation => {
        const token = (await Auth.currentAuthenticatedUser()).signInUserSession.idToken.jwtToken;
        //console.log(token);
        return operation.setContext({
            headers: {
                "authorization": token
            }
        });
    }
});

[인스타그램 클론코딩] 웹 로그인 구현 포스트에서 Auth.signIn 메소드를 통해 Cognito로 부터 토큰이 포함된 사용자 정보를 받아왔었는데요. 이 정보는 자동으로 Local Storage에 저장됩니다.

이렇게 Local Storage에 저장된 사용자 정보는 Auth.currentAuthenicatedUser 메소드를 통해서 다시 가져올 수 있습니다. 이겨서 ID 토큰을 추출한 다음 headers.authorization에 입력해 주면됩니다.

매번 Local Storage에 접근해야 하나요?

네. 사용자 정보에 포함된 토큰은 Amplify에 의해 몇 분마다 자동적으로 갱신됩니다.

사용하기 편하다는 이유 뿐만 아니라, 이런 보안성 때문에 Amplify를 선택하는데 큰 영향을 미쳤습니다.

그래서 전역 변수로 저장해 놓고 사용할 수 없습니다.