firebase kakao login with angular

Question

trying to create kakao login on my angular app with firebase.

  kakaoLogin() {
    window.Kakao.Auth.loginForm({
      success: (authObj: any) => {
        this.getKakao(authObj.access_token).then(res => { })
        this.afAuth.signInWithCustomToken(authObj.access_token).then(res => {
          console.log(res);

        })
      },
      fail(err: any) {
        console.log(err);
      },
    })
  }
  async getKakaoUser(token: string): Promise<User> {
    const kakaoUser: any = await this.http.get('https://kapi.kakao.com/v2/user/me?secure_resource=true', {
      headers: { Authorization: `Bearer ${token}` },
    });
    const user: any = {
      uid: `kakao:${kakaoUser.data.kakao_account.email}`,
      email: kakaoUser.data.kakao_account.email || "",
      displayName: kakaoUser.data.properties.nickname || "",
      photoURL: kakaoUser.data.properties.profile_image,
      provider: 'kakao',
    };
    return user;
  }

but it says Invalid assertion format. 3 dot separated segments required. (auth/invalid-custom-token).

as i've read some post on SO that authObj.access_token is not JWT token, so how can i convert it to JWT token?

Answer 1

If Kakao doesn't return a JWT with an ID token, there's no way to securely create one from that in your client-side application code. After all, if you could do that, so could anyone else.

What you can do is parse the token you get (how to do that depends on what Kakao returns) and then mint a custom token in a trusted environment, such as your development machine, a server that you control, or Cloud Functions/Cloud Run. You can then sign in with that custom token on the client.