How do I pass invitation token with google auth to my backend?
import { CredentialResponse } from "../interfaces/google";
export const Login: React.FC = () => {
const { mutate: login } = useLogin<CredentialResponse>();
//http://localhost:3000/login?to=%2Flogin%2F754c8673492ef41ba151b4ed526e74dab4cf6151c5126d89c43c0bee8f765aab
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const token = queryParams.get("to")?.split("/login/")[1];
console.log(token);
const { loginWithRedirect } = useAuth0();
const GoogleButton = (): JSX.Element => {
const divRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (typeof window === "undefined" !divRef.current) {
return;
}
try {
window.google.accounts.id.initialize({
ux_mode: "popup",
client_id: "*-.apps.googleusercontent.com",
callback: async (res: CredentialResponse) => {
if (res.credential) {
res.token = token;
login(res);
}
},
});
window.google.accounts.id.renderButton(divRef.current, {
theme: "filled_blue",
size: "medium",
type: "standard",
});
} catch (error) {
console.log(error);
}
}, []); // you can also add your client id as dependency here
return <div ref={divRef} />;
};
return (
.....
<Box mt={4}>
<GoogleButton />
</Box>
);
};
The token what it should be passed to my backend.
and call this function: router.route('/login/:token').post(createUser);
I tested with postman and from backend part it was working well and created the user I expected
export const Login: React.FC = () => {
const { mutate: login } = useLogin<CredentialResponse>();
//http://localhost:3000/login?to=%2Flogin%2F754c8673492ef41ba151b4ed526e74dab4cf6151c5126d89c43c0bee8f765aab
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const token = queryParams.get("to")?.split("/login/")[1];
console.log(token);
const { loginWithRedirect } = useAuth0();
const GoogleButton = (): JSX.Element => {
const divRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (typeof window === "undefined" !divRef.current) {
return;
}
try {
window.google.accounts.id.initialize({
ux_mode: "popup",
client_id: "*-.apps.googleusercontent.com",
callback: async (res: CredentialResponse) => {
if (res.credential) {
res.token = token;
login(res);
}
},
});
window.google.accounts.id.renderButton(divRef.current, {
theme: "filled_blue",
size: "medium",
type: "standard",
});
} catch (error) {
console.log(error);
}
}, []); // you can also add your client id as dependency here
return <div ref={divRef} />;
};
return (
.....
<Box mt={4}>
<GoogleButton />
</Box>
);
};
The token what it should be passed to my backend.
and call this function: router.route('/login/:token').post(createUser);
I tested with postman and from backend part it was working well and created the user I expected
