[AI 음성변환] melodyswap - React,next.js,firebase auth - (1)

해당 프로젝트를 진행하기 앞서 개발기간은 2주정도로 단기간을 잡았다.

이를 위해 기존에 어느정도 사용가능하였던 리액트와 Next.js 를 사용하기로 결정하였고

 

미숙하였던 디자인과 CSS 등으로 무료 템플릿을 통해 프로젝트를 구성하고자 하였다.

 

기본적으로 프론트에서 구현할 기능은 다음과 같이 기획을 하였다.

1. 로그인 기능

2. 음성 업로드 기능

3. 음성 변환기능

    3-1 음성 타입 선택

    3-2 음성 키 조절

4. 보관함기능

 

---

1. 로그인 기능 & Next auth

로그인 기능은 충분하지 않은 AI 서버 용량의 한계로 무분별한 사용을 막아야했기 때문에 

필수적으로 구현하여야 했지만

추가적인 백엔드 로직을 개발하기에는 시간과 자원이 충분하지 않았다.

 

따라서 BaaS 를 사용하여 oAuth 기능을 통해 로그인을 구현하는게 그 당시 베스트 선택이였다.

(또한 디비나 스토리지 같은 환경을 프로트타입으로 가장 저렴하게 구성해야했기 때문에 google firebase를 선택한 상태였는데

이 때 firebase authentication 을 사용하였을 때 가장 효율적이였다.)

 

처음은 인증관련 구현을 편하게 도와주는 Next auth 를 사용하여 구글 로그인 기능을 구현하게 되었다.

 

pages/api/auth/[...nextauth].js

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  callbacks: {
    async signIn({ account, profile }) {
      if (account?.provider === "google") {
        const result = await getDocument("users", profile.email);

        // 데이터 베이스 조회 실패
        if (result.error) return false;

        if (typeof result?.docData === "undefined") {
          const user = {
            email: profile.email,
            name: profile.name,
            remix_count: 3,
            createAt: new Date(),
            deleteAt: null,
          };

          const userId = profile.email;
          const { error } = await addData("users", user, userId);

          if (error) {
            return false;
          }
        }

        return true;
      }
      return true;
    },
  },
}

 

해당 방식은 next auth 의 signin 메서드를 통해 구글 로그인이 완료되면 sigin callback 함수를 통해 

해당 유저가 firebase DB 에 존재하지 않으면 저장하는 방식이다.

 

초기 이 방법을 사용했지만 사실 이 방식은 후반에 firebase authentication 을 제대로 사용하지 않았으며 firestore rule 에도 맞지 않는 방식이였다. 

로그인 한 유저가 자신이 변환한 음원의 목록을 확인하려면 firestore rule에 의해 인증받은 디비에만 접근 가능해야하지만 해당 방식은 firebase authentication 을 사용하지 않고 그에 따라 firebase store에 요청을 보낼때 인증관련된 정보를 하나도 보내지 못했기 때문에다. ( 또한 해당 콜백을 통해 authentication 을 적용하고자 여러 방법을 사용하였지만, 로그인이 완료되고 계속 인증 쿠키가 사라졌다. )

 

사실 처음 next auth 를 사용하였던 것은 편리한 login session 관리를 통해 

2.로그인 & firebase auth

따라서 다음과 같이 Firebae/auth 에 존재하는 googleauthProvider 통해 로그인과 회원가입을 구현하였다.

 

api/auth.js

import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
import {fbAuth} from "../firebase/config";

const provider = new GoogleAuthProvider();

export const loginHandle = async () =>{
  let data = null
  let error = null;

  await signInWithPopup(fbAuth, provider).then( async (result)=>{
	const details = getAdditionalUserInfo(result)

    const credential = await GoogleAuthProvider.credentialFromResult(result);
    const token = credential?.accessToken;
    const user = result.user;

    const userData = {email:user.email, name:user.displayName}
    data = userData
    
    // 회원가입
    if(details.isNewUser){
      const userInfo = {
        email: user.email,
        name: user.displayName,
        remix_count: 3,
        createAt: new Date(),
        deleteAt: null,
      };

      const userId = user.email;
      const createNew = await addData("users", userInfo, userId);
    }

  }).catch((e)=>{
    alert('error : 로그인 실패')
    const errorCode = e.code;
    const errorMessage = e.message;
    error = {"code":errorCode,"message":errorMessage}

  })

  return {data, error}
}

export const logoutHandle = async () => {
  await fbAuth.signOut();
};

 

이 방식을 통해 로그인한 유저는 쿠키에 firebase auth 정보를 저장할수 있었고, 

해당 로그인이 진행되면 유저의 정보는 react context api 에 저장하여 전역적으로 관리하게 구현하였다.