62일차 TIL(소셜 로그인2 / 레이아웃 수정)

구글 소셜 로그인시 주의사항

이 탭에 로컬 호스트를 입력해 주어야한다.

리디렉선 URI를 

supabase 의 Authenication - Users - Providers 의 해당 Auth Providers 탭의 google 로그인을

클릭하여 하단 Callback URL (for OAuth)의 있는 callback 주소를 전체 복사해서 꼭 붙여줘야한다.

유튜브나 타 레거시를 보면서 이거저거 시도하다 보니까 빼먹은 루트가 있었는데 꽤나 시간을 할애했다.

 

나는 Header component 내부에 로그인 탭을 심어주었다.

Header 에는 로고 - 각 카테고리 탭 - 로그인 (in & out btn) 정보가 들어가게된다

 

 

 Header의 들어가는 Login.tsx 코드

 

import React, { useState, useEffect } from 'react';

import { supabase } from '../api/supabase';

import Button from '@mui/material/Button';
import { makeStyles } from '@mui/styles';
import { styled } from 'styled-components';

export const handleLogOut = async () => {
  const { error } = await supabase.auth.signOut();

  alert('로그아웃 되었습니다.');
  if (error) console.log('error=>', error);
};

 

로그아웃 하기

const Login = () => {
  const [email, setEmail] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [passwordCheck, setPasswordCheck] = useState<string>('');

  const classes = useStyles();

  useEffect(() => {
    console.log(email);
    console.log(password);
  }, [email, password]);

  const EmailChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEmail(e.target.value);
  };
  const PasswordChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value);
  };
  const PasswordCheckChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPasswordCheck(e.target.value);
  };

// light-gray 이 부분은 기본적인 로그인 셋팅을 구현한 스코프라 없어도 무방하다.

  //google
  const signupGoogle = async (e: React.FormEvent) => {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'google',
      options: {
        queryParams: {
          access_type: 'offline',
          prompt: 'consent'
        }
      }
    });
    if (data) alert('로그인이 완료되었습니다');
    console.log(data);
    if (error) console.error('error =>', error);
  };

//provider: 'google', 이 부분만 교체해주어도 원하는 Auth Providers를 사용할 수 있다.

  return (
    <LoginTag>
      <div>
        <form>
          <h2>Find your HipPop</h2>
          <input type="text" onChange={EmailChangeHandler} placeholder="Email" />
          <input type="password" onChange={PasswordChangeHandler} placeholder="Password" />
          <input type="password" onChange={PasswordCheckChangeHandler} placeholder="Check to Password" />
          <div className="btn-wrapper">
            {/* <Button
              variant="contained"
              href="#contained-buttons"
              className={classes.customButton}
              onClick={signupHandle}
            >
              Login
            </Button> */}
            <Button
              variant="contained"
              href="#contained-buttons"
              className={classes.customButton}
              onClick={signupGoogle}
            >
              Google
            </Button>
            <Button
              variant="contained"
              href="#contained-buttons"
              className={classes.customButton}
              onClick={signupKakao}
            >
              Kakao
            </Button>  // 현재 개발중
          </div>
        </form>
      </div>
      {/* <Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} providers={['google']} /> */}
    </LoginTag>
  );
};

 

providers 에 google 만 넣어주면 바로 활성화 된다.

하지만 이에 앞서 전 게시글과 현 페이지 상단에 보여준 순서가 하나라도 어긋나면 오류페이지가 뜬다. 

 

Login 컴포넌트가 들어가는 Header

 

import React, { useEffect, useState } from 'react';

import { useNavigate } from 'react-router-dom';
import { handleLogOut } from './Login';
import Search from './Search';
import { styled } from 'styled-components';

interface UserInfo {
  avatar_url: string;
  name: string;
}

// 타입을 지정해줘야한다.

function Header() {
  const navigate = useNavigate();
  const [user, setUser] = useState<UserInfo | null>(null);

  useEffect(() => {
    const storedUser = localStorage.getItem('localstorage에 담겨진 supabase access token');
    if (storedUser) {
      const userData = JSON.parse(storedUser);
      const { avatar_url, name } = userData.user.user_metadata;
      setUser({ avatar_url, name });
    }
  }, []);

  const handleToggle = () => {
    if (user) {
      handleLogOut();
      setUser(null);
    } else {
      navigate('/auth/signin');
    }
  };

  return (
    <HeaderTag>
      <div className="logo-wrapper">
        <img src="/asset/test-logo.png" className="test-logo" />
        Header tap
      </div>
      <Search />
      <div>About</div>
      <div>Detail</div>
      <div>Community</div>
      <div>Contract</div>
      <div>
        <div className="user-info">
          {user && (
            <>
              <p>{user.name}</p>
              <img src={user.avatar_url} alt="User Avatar" />
            </>
          )}
          <button onClick={handleToggle}>{user ? 'Logout' : 'Login'}</button>
        </div>
      </div>
    </HeaderTag>
  );
}