[코딩온] 리액트 vite 구글 로그인 에러 해결 (React OAuth2 | Google)

React OAuth2 | Google 패키지를 이용해서 리액트에서 구글 로그인을 적용하려고 하는데 아무리 해도 안되고 이 에러가 계속 떴다.

[GSI_LOGGER]: The given origin is not allowed for the given client ID

그래서 폭풍 서치를 해봤는데 구글 클라우드에서 설정할때 localhost:포트번호 뿐만 아니라 localhost: 도 함께 추가 하면 된다고 나왔다. 그래서 이걸 추가했는데 그래도 안되서 좌절했다. vite는 5137 를 기본 포트로 쓰기 때문에 5137로 아무리 설정 해줘도 안되고 127.0 0.1 로 해도 안되고 그냥 뭘 해도 안됨. 하루종일 검색하고 시도하고도 안되서 포기하려던 차에 혹시 vite 기본 포트 숫자 때문에 안되는건가 하고 포트 번호를 변경해보았다.

vite.config.js 에서 아래와 같이 이렇게

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
})

포트 3000으로 바꾸고 마지막으로 시도를 해보았다. 구글 클라우드에는

이렇게 localhost랑 localhost:포트 이름 둘다 써줬다. 그 결과 드디어 작동했다. 원래 gsi 써서도 구현해보려고 했는데 이것도 계속 에러 떠서 이건 아직 방법을 못찾았다. 나중에 시간 있을 때 찾아봐야 겠다.