[React] authentication front-end (log-in, create account, etc)

Local State ? 

local state 는 local storage ( HTML5에서 브라우저에 추가된 저장소로, 브라우저가 종료되어도 그대로 남아있음. ) 에 state 값을 저장해서 사용 할 수 있는 것.

 

LogIn & LogOut Authentication 

// Apollo.ts

import { ApolloClient, InMemoryCache } from "@apollo/client";

export const client = new ApolloClient({
    uri: 'http://localhost:4000/graphql',
    cache: new InMemoryCache({
        typePolicies: {
            Query: {
                fields: {
                    isLoggedIn: {
                        read() {
                            return false;
                        },
                    },
                },
            },
        },
    }),
});

Apollo.ts 부분에서 cache 에서 다음과 같이 Query 를 작성해주고, 

 

// App.tsx

import React from 'react';
import { LoggedOutRouter } from './routers/logged-out-router';
import { gql, useQuery } from '@apollo/client';

const IS_LOGGED_IN = gql`
  query isLoggedIn {
    isLoggedIn @client
  }
`

function App() {
  const { data } = useQuery(IS_LOGGED_IN);
  console.log(data);
  return <LoggedOutRouter />;
}

export default App;

IS_LOGGED_IN 에서 query를 client cache에 요청하여 (요청할 field 뒤에 @client를 붙인다.), useQuery를 이용하여 값을 { data } 에 저장하여 콘솔에 출력한다.

 

 

 

작성한것 과 같이 false가 나온 것 을 확인한다. 

 

이제 isLoggedIn 필드 값이 true, false 인지에 따라 LoggedOutRouter, LoggedInRouter를 조건에 맞게 리턴해줄 수 있게 해준다. 

function App() {
  const { 
    data: { isLoggedIn } 
  } = useQuery(IS_LOGGED_IN);

  return isLoggedIn? <LoggedInRouter /> : <LoggedOutRouter />;
}

 

log-out-router.tsx 수정 (local state를 apollo client 로 변경)

 

query에서 항상 isLoggedIn은 false 이기 때문에, react variables 이라는 것을 사용한다. (Apollo Client 의 새 기능)

 

React variables 는 application 어디에서나 읽고 수정할 수 있다. GraphQL operation 을 사용할 필요가 없다. 이 variables의 저장은 apollo client에 된다. 

 

Reactive variables의 값이 변경 되면, 그 필드를 갖는 쿼리들은 자동으로 새로고침 된다. 

 

makeVar를 이용해서 react variables을 다음과 같이 생성한다.

export const isLoggedInVar = makeVar(false);

 

isLoggedInVar 변수를 다른 파일에서도 사용할 것 이기 때문에 export 해준다.

 

// logged-out-router.tsx

import React from "react";
import { isLoggedInVar } from "../apollo";

export const LoggedOutRouter = () => {
    const onClick = () => {
        isLoggedInVar(true);
    };
    return (
        <div>
            <h1>Logged Out</h1>
            <button onClick={onClick}>Click to login</button>
        </div>
    );
};

 

다음과 같이 Click to login 버튼을 누르면 isLoggedInVar 의 값이 true로 바뀌고, App.tsx 는 LoggedInRouter를 반환하게 될 것이다.

 

버튼을 누르기 전

 

버튼을 누른 후

그리고 query 요청해여 받아서 저장하지 않고, hook을 이용해서 reactive variables 의 값을 받아 사용할 수 있다. (useReactiveVar 함수 사용)

 

const isLoggedIn = useReactiveVar(isLoggedInVar);

 

그렇다면 App.tsx 파일 코드는 훨씬 더 간결해 진 것을 볼 수 있다.

// App.tsx

import React from 'react';
import { LoggedOutRouter } from './routers/logged-out-router';
import { gql, useQuery, useReactiveVar } from '@apollo/client';
import { LoggedInRouter } from './routers/logged-in-router';
import { isLoggedInVar } from './apollo';


function App() {
  
  const isLoggedIn = useReactiveVar(isLoggedInVar);

  return isLoggedIn? <LoggedInRouter /> : <LoggedOutRouter />;
}

export default App;

 

logged-in-router.tsx 도 logout 버튼을 만들어 isLoggedInVar 가 다시 false로 바뀌게 해준다.

 

// logged-in-router.tsx

import React from "react";
import { isLoggedInVar } from "../apollo";

export const LoggedInRouter = () => (
    <div>
        <h1>Logged In</h1>
        <button onClick={() => isLoggedInVar(false)}>Log Out</button>     
    </div>
);

 

Form

 

react hook form