Today I Learned (TIL)

24.01.10 수파베이스 카카오 로그인 구현

폼폼코 2024. 1. 10. 20:16
728x90
반응형

수파 베이스 회원가입 어떻게 구현하지 고민하다가

유튜브도 찾아보고 공식문서도 뒤져보고 너무 삽질 아닌가 하다가 결국 암튼 했습니다

파이어 베이스 사용할때는 자료가 많아서 잘나왔는데

수파베이스는 생각보다 자료가 없어서 스택 오버플로우까지 다녀왔네요

그와중에 깃허브 오류....

인도인... 벌써부터 신뢰가 간다

영어좀 배워야겠다는 생각이 강하게 드는 하루였습니다

에러 발생

Uncaught runtime errors:
×
ERROR
Failed to construct 'URL': Invalid URL
TypeError: Failed to construct 'URL': Invalid URL
    at new SupabaseClient (http://localhost:3000/static/js/bundle.js:14359:37)
    at createClient (http://localhost:3000/static/js/bundle.js:14554:10)
    at ./src/shared/supabase.ts (http://localhost:3000/static/js/bundle.js:1290:89)
    at options.factory (http://localhost:3000/static/js/bundle.js:67140:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:66533:33)
    at fn (http://localhost:3000/static/js/bundle.js:66797:21)
    at ./src/pages/signup/signup.tsx (http://localhost:3000/static/js/bundle.js:946:73)
    at options.factory (http://localhost:3000/static/js/bundle.js:67140:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:66533:33)
    at fn (http://localhost:3000/static/js/bundle.js:66797:21)
 

 

다됐구나 싶을때 쯤에는 runtime error 발생!

별건 아니였고 

export const supabasedata = createClient(supabaseConfig.supabaseUrl, supabaseConfig.supabaseKey);
 

supabaseUrl , supabaseKey 가 순서대로 있어야 정상작동한다고합니다

역시 공식문서 그대로 해야하나 봅니다

 

import React, { useState } from 'react';
import { supabasedata } from 'shared/supabase';
import { Link } from 'react-router-dom';
import { StyledSignup, StyledForm, StyledInput, StyledButton, StyledH1, StyledLabel } from './styles';
interface FormData {
  // displayname: string;
  email: string;
  password: string;
}

function Signup() {
  const [formData, setFormData] = useState<FormData>({
    // displayname: '',
    email: '',
    password: ''
  });

  const [errors, setErrors] = useState<Record<string, string>>({});

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSignup = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    try {
      const { data, error } = await supabasedata.auth.signUp({
        email: formData.email,
        password: formData.password
        // options: {
        //     displayname: formData.displayname
        //   }
      });

      if (error) {
        console.error(error);
        alert('Please check your ID and password');
      } else {
        console.log(data);
        alert('Welcome to sign up!');
        // You can redirect or perform other actions upon successful signup
      }
    } catch (error) {
      console.error(error);
      alert('An error occurred during signup');
    }
  };

  return (
    <StyledSignup>
      <StyledH1>회원 가입</StyledH1>
      <StyledForm onSubmit={handleSignup}>
        {/* <div>
          <label htmlFor="displayname">이메일</label>
          <input type="displayname" id="displayname" name="displayname" value={formData.displayname} onChange={handleChange} />
          {errors.displayname && <p>{errors.displayname}</p>}
        </div> */}
        <StyledLabel htmlFor="email">이메일</StyledLabel>
        <StyledInput type="email" id="email" name="email" value={formData.email} onChange={handleChange} />
        {errors.email && <p>{errors.email}</p>}

        <StyledLabel htmlFor="password">비밀번호</StyledLabel>
        <StyledInput type="password" id="password" name="password" value={formData.password} onChange={handleChange} />
        {errors.password && <p>{errors.password}</p>}

        <StyledButton type="submit">가입하기</StyledButton>
      </StyledForm>

      <Link to="/login">
        <StyledButton>로그인 하러 가기</StyledButton>
      </Link>
    </StyledSignup>
  );
}

export default Signup;
 

회원가입 코드 입니다 주석처리가 조금 남아있는데 회원가입시 닉네임도 추가입력되도록 수정해봐야겠습니다

성공!

 

일단 Authentication 에 뜨긴합니다 회원가입 할때 displayname까지 넣어주면 좋을거같은데...

 


공식문서를 참고해서 카카오 로그인까지 구현해 보았습니다

const kakaologin = async function signInWithKakao() {
    const { data, error } = await supabasedata.auth.signInWithOAuth({
      provider: 'kakao'
    });
  };

<StyledButton onClick={kakaologin}>카카오로그인</StyledButton>
 

마무리후 아주 간단한 코드로 카카오 로그인이 완성되었습니다

 

공식 문서대로 다했다 생각하고 로그인을 할려는 데 이런 오류가떳습니다

 

수파베이스에서 제안한 필수 항목들을 요청하지 못해서 그렇습니다

비즈앱 전환은 앱 프로필 사진 아무거나 넣어도 통과가능합니다

 

수파 베이스 자체에서 카카오로그인시 

동의 항목"에서 다음 범위를 설정하십시오: account_email, profile_image, profile_nickname
 

유저 프로필 이미지 닉네임 이메일 3가지항목을 받아오는 요청을 보내라고 하는데

카카오 설정에서 필수가 아닌 선택으로 해도 정상 작동합니다

auth 항목 프로 바이더에도 kakao 라고 잘 뜨고있습니다,

유저 닉네임 이메일 프로필 사진은 동의를 안했는데 해볼걸그랬습니다

 

 

 

11.동기와 비동기의 차이에 대해 설명해주시고 비동기프로그래밍의 필요성에 대해 답변해주세요.

  • 답변

동기는 요청을 하면 시간이 얼마나 걸리던지 요청한 자리에서 결과가 주어져야 합니다

한줄서기처럼 데이터 요청이 이루어지기에 시간이 오래걸릴수가있고

비동기는 요청을 한번에 보내기에 그시간동안 다른 외부 활동이 가능합니다

 

 

12 .브라우저의 작동방식에 대해서 설명해주세요.

  • 답변

사용자가 요청을 하면 서버에서 응답을 받아 브라우저에 표시합니다

 

728x90
반응형