From cce4778c3a9006b24d7b736b9249cbef33e6f475 Mon Sep 17 00:00:00 2001 From: Tristan Yang Date: Wed, 22 Jun 2022 22:21:30 +0800 Subject: [PATCH] fix: magic link login while invite only --- src/app/config.ts | 1 + src/common/component/GithubLoginButton.tsx | 28 +++++++++++++++++++++- src/common/component/GoogleLoginButton.tsx | 9 ++++--- src/routes/login/index.tsx | 8 ------- src/routes/reg/Register.tsx | 4 +++- 5 files changed, 37 insertions(+), 13 deletions(-) diff --git a/src/app/config.ts b/src/app/config.ts index e8bbef97..a276340b 100644 --- a/src/app/config.ts +++ b/src/app/config.ts @@ -35,6 +35,7 @@ export const KEY_DEVICE_KEY = "RUSTCHAT_DEVICE_KEY"; export const KEY_USERS_VERSION = "RUSTCHAT_USERS_VERSION"; export const KEY_AFTER_MID = "RUSTCHAT_AFTER_MID"; export const KEY_PWA_INSTALLED = "RUSTCHAT_PWA_INSTALLED"; +export const KEY_LOCAL_MAGIC_TOKEN = "RUSTCHAT_LOCAL_MAGIC_TOKEN"; export const Emojis = ["👍", "❤️", "😄", "👀", "👎", "🎉", "🙁", "🚀"]; export const Views = { item: "item", diff --git a/src/common/component/GithubLoginButton.tsx b/src/common/component/GithubLoginButton.tsx index fbe95d10..2c1d7d9e 100644 --- a/src/common/component/GithubLoginButton.tsx +++ b/src/common/component/GithubLoginButton.tsx @@ -1,6 +1,11 @@ +import { useEffect } from "react"; import IconGithub from "../../assets/icons/github.svg"; import styled from "styled-components"; +import { KEY_LOCAL_MAGIC_TOKEN } from "../../app/config"; + import Button from "./styled/Button"; +import { useLoginMutation } from "../../app/services/auth"; +import toast from "react-hot-toast"; const StyledSocialButton = styled(Button)` width: 100%; @@ -24,13 +29,34 @@ type Props = { }; export default function GithubLoginButton({ type = "login", client_id }: Props) { + //拿本地存的magic token + const magic_token = localStorage.getItem(KEY_LOCAL_MAGIC_TOKEN); + const [login, { isLoading, isSuccess }] = useLoginMutation(); + useEffect(() => { + const query = new URLSearchParams(location.search); + const isGithub = query.get("oauth") === "github"; + const code = query.get("code"); + if (isGithub && code) { + login({ + magic_token, + code: code, + type: "github" + }); + } + }, []); + useEffect(() => { + if (isSuccess) { + toast.success("Login Successfully"); + // navigateTo("/"); + } + }, [isSuccess]); const handleGithubLogin = () => { location.href = `http://github.com/login/oauth/authorize?client_id=${client_id}`; // console.log("github login"); }; // console.log("google login ", loaded); return ( - + {` ${type === "login" ? "Sign in" : "Sign up"} with Github`} diff --git a/src/common/component/GoogleLoginButton.tsx b/src/common/component/GoogleLoginButton.tsx index d4fabed2..398b3602 100644 --- a/src/common/component/GoogleLoginButton.tsx +++ b/src/common/component/GoogleLoginButton.tsx @@ -2,7 +2,8 @@ import { FC, useEffect } from "react"; import { useGoogleLogin } from "react-google-login"; import toast from "react-hot-toast"; import styled from "styled-components"; -import googleSvg from "../../assets/icons/google.svg?url"; +import { KEY_LOCAL_MAGIC_TOKEN } from "../../app/config"; +import IconGoogle from "../../assets/icons/google.svg"; import Button from "./styled/Button"; import { useLoginMutation } from "../../app/services/auth"; @@ -29,7 +30,8 @@ interface Props { const GoogleLoginButton: FC = ({ type = "login", clientId }) => { const [login, { isSuccess, isLoading }] = useLoginMutation(); - + //拿本地存的magic token + const magic_token = localStorage.getItem(KEY_LOCAL_MAGIC_TOKEN); const { signIn, loaded } = useGoogleLogin({ onScriptLoadFailure: (wtf) => { console.error("google login script load failure", wtf); @@ -38,6 +40,7 @@ const GoogleLoginButton: FC = ({ type = "login", clientId }) => { onSuccess: ({ tokenId, ...rest }) => { console.info("google oauth success", tokenId, rest); login({ + magic_token, id_token: tokenId, type: "google" }); @@ -60,7 +63,7 @@ const GoogleLoginButton: FC = ({ type = "login", clientId }) => { // console.log("google login ", loaded); return ( - google icon + {loaded ? `${type === "login" ? "Sign in" : "Sign up"} with Google` : `Initializing`} ); diff --git a/src/routes/login/index.tsx b/src/routes/login/index.tsx index ae4b8d44..ff2b59ab 100644 --- a/src/routes/login/index.tsx +++ b/src/routes/login/index.tsx @@ -38,14 +38,6 @@ export default function LoginPage() { const exists = query.get("exists"); if (oauth) { switch (oauth) { - case "github": - if (code) { - login({ - code: code, - type: "github" - }); - } - break; case "oidc": if (code && state) { login({ diff --git a/src/routes/reg/Register.tsx b/src/routes/reg/Register.tsx index b8ede222..39d8ac8d 100644 --- a/src/routes/reg/Register.tsx +++ b/src/routes/reg/Register.tsx @@ -1,7 +1,7 @@ import { useState, useEffect } from "react"; import toast from "react-hot-toast"; // import { useNavigate } from "react-router-dom"; -import BASE_URL from "../../app/config"; +import BASE_URL, { KEY_LOCAL_MAGIC_TOKEN } from "../../app/config"; import Input from "../../common/component/styled/Input"; import Button from "../../common/component/styled/Button"; import { useLazyCheckEmailQuery, useSendRegMagicLinkMutation } from "../../app/services/auth"; @@ -30,6 +30,8 @@ export default function Reg() { // const githubCode = query.get("gcode"); const token = query.get("magic_token"); if (token) { + //本地存一下 magic token 后续oauth流程用到 + localStorage.setItem(KEY_LOCAL_MAGIC_TOKEN, token); setMagicToken(token); } }, []);