How to connect my Login(made using React) with my Sanity.io?

Question

I've been trying to improve my React skills by following some JavaScript Mastery tutorials, but it happened that one of them is out of date. In the tutorial, he uses the old Google Login, which I could update, the problem is the fix to the Sanity.io that he reccomends is made using a totally different application and typescript(I started the project using JavaScript, and would like to finish it innit). That been said, how could I connect the Google Login button information(which works, but don't get the data) and transfer it to Sanity.io?

Login code:

import React from "react"; import { useNavigate } from

"react-router-dom"; import { GoogleOAuthProvider } from

"@react-oauth/google"; import { GoogleLogin, googleLogout } from

"@react-oauth/google"; import { FcGoogle } from "react-icons/fc";

import covenlogin from "../assets/covenlogin.mp4"; import logo from

"../assets/logo.png"; import { gapi } from "gapi-script"; import {

useEffect } from "react";

import { client } from "../client";

const Login = () => { const navigate = useNavigate();

const responseGoogle = (response) => {

localStorage.setItem("user", JSON.stringify(response.profileObj));

const { name, googleId, imageUrl } = response.profileObj;

const doc = {

  _id: googleId,

  _type: "user",

  userName: name,

  image: imageUrl,

};

client.createIfNotExists(doc).then(() => {

  navigate("/", { replace: true });

});   };

return (

    <div className="absolute flex flex-col justify-center items-center top-0 right-0 left-0 bottom-0    bg-blackOverlay">
      <div className="p-5">
        <img src={logo} width="130px" />
      </div>

      <div className="shadow-2xl">
        <GoogleLogin onSuccess={responseGoogle} onError={responseGoogle} />
      </div>
    </div>
  </div>
</div>   ); }; export default Login;

User schema code:

export default {

name: 'user',

title: 'User',

type: 'document',

fields: [

    {

        name: 'userName',

        title: 'UserName',

        type: 'string'

    },

    {

        name: 'image',

        title: 'Image',

        type: 'string'

    },

] }

PS: Also need to get the GoogleId, thanks for the reading.

Answer 1

You have to decode the profileObj for you to be able to destructure it. Install the jwt-decode package i.e. npm i jwt-decode. Then import it in the component you're working in: import jwt_decode from "jwt-decode"; Here is the code full code for the Login.js

import React from 'react'
import { GoogleLogin } from '@react-oauth/google';
import {FcGoogle}  from 'react-icons/fc' 
import sharedVideo from '../assets/share.mp4'
import Logo from '../assets/logowhite.png'
import {client} from '../Client'
import { useNavigate } from 'react-router-dom'
import jwt_decode from "jwt-decode";

const Login = () => {

    const navigate = useNavigate()

    const responseGoogle = (response) => {

    
    try{
        localStorage.setItem('user', JSON.stringify(response.profileObj))
        
        var decodedHeader = jwt_decode(response.credential);
        console.log(decodedHeader)
        //destrcure some of the props from that response
        const {name, sub, imageUrl } = decodedHeader
      
        const doc ={
            _id:sub,
            _type:'user',
            userName: name,
            image: imageUrl, 
        } 
        
        client.createIfNotExists(doc)
        .then(() =>{
            navigate('/', {replace : true} )
        
        })
        .catch(error => console.log(error))
    }
    catch (e) {
        localStorage.clear() //what you need to do incase the jwt is not valid
        console.log(e) //for your own debugging
    }
}
return (
<div className='flex justify-start items-center flex-col h-screen'>
    <div className='relative w-full h-full'>
        <video 
            src={sharedVideo}
            type ='video/mp4'
            muted
            loop
            autoPlay
            className='w-full h-full object-cover'
        />
        <div className='absolute flex flex-col justify-center items-center top-0 bottom-0 right-0 left-0 bg-blackOverlay'>
        <div  className='p-5'>
            <img src ={Logo} alt = 'logo' width='130px'/>
        </div>
        <div className='shadow-2xl '>
              <GoogleLogin
                
                render={(renderProps) =>(
                    <button 
                    onClick={renderProps.onClick} 
                    disabled = {renderProps.disabled}
                    className=' bg-mainColor flex justify-center items-center p-3 rounded-lg cursor-pointer outline-none'>
                        <FcGoogle className='mr-4 '/>Sign In with Google
                    </button>
                )}
                onSuccess = {responseGoogle}
                onFailure = {responseGoogle}
                cookiePolicy = 'single_host_origin'
                />
        </div>
        </div>
    </div>
    </div>
  )
}

export default Login