I am using the @react-oauth/google package for authenticating users in my app. However, our backend is pre-built in such a way that it requires the JWT token returned in the credentials response. The @react-oauth/google package provides the credentialsResponse, but only with the GoogleLogin component or the useGoogleOneTapLogin hook in the onSuccess callback.
Currently, I am using the GoogleLogin component in the following way:
PS: I have already setup GoogleOAuthProvider in App.jsx as specified in docs and its working
import {
GoogleLogin,
useGoogleLogin,
useGoogleOneTapLogin,
} from "@react-oauth/google";
export const GoogleLoginButton = () => {
const onGoogleSuccess = async (tokenResponse) => {
try {
const userData = jwtDecode(tokenResponse?.credential);
if (isSignup) {
// This is later used to send the credential JWT token to the backend
setGoogleRes({ ...userData, ...tokenResponse });
} else {
loginUser(userData, tokenResponse);
}
} catch (error) {
setOpen(true);
setToastData(ToastConstant.SOMETHING_WENT_WRONG);
console.log("Google fetch error", { error });
}
};
const onGoogleError = (error) => {
setGoogleRes(null);
setOpen(true);
setToastData(ToastConstant.SOMETHING_WENT_WRONG);
};
return (
<GoogleLogin
onSuccess={onGoogleSuccess}
onFailure={onGoogleError}
text="continue_with"
theme="outline"
width="100%"
containerProps={{
style: {
width: "100% !important",
},
}}
/>
);
};
However, I would like to have a custom button with a similar theme to my website. I want to customize the UI of the button extensively and even change the displayed text. I have searched extensively, but it seems that most of the libraries for custom Google OAuth buttons have been deprecated, and only this library seems decent enough to be used.
Can someone provide a way to create a custom Google OAuth button in React where the onSuccess callback receives the credential JWT token as well?
Thank you in advance!