thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: auth workflow in magic-link

Browse Source 
chore: auth workflow in magic-link
This commit is contained in:
guru_sainath 2023-06-14 17:42:48 +05:30 committed by GitHub
commit c3aa1cb06d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
apps/app/pages/magic-sign-in.tsx
View File

@ -1,67 +1,63 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
// next imports
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { mutate } from "swr";
// layouts // layouts
import DefaultLayout from "layouts/default-layout"; import DefaultLayout from "layouts/default-layout";
// services // services
import authenticationService from "services/authentication.service"; import authenticationService from "services/authentication.service";
// hooks // hooks
import useUser from "hooks/use-user"; import useUserAuth from "hooks/use-user-auth";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// types // types
import type { NextPage } from "next"; import type { NextPage } from "next";
// constants
import { USER_WORKSPACES } from "constants/fetch-keys";
const MagicSignIn: NextPage = () => { const MagicSignIn: NextPage = () => {
const router = useRouter(); const router = useRouter();
const [isSigningIn, setIsSigningIn] = useState(true);
const [errorSigningIn, setErrorSignIn] = useState<string | undefined>();
const { password, key } = router.query; const { password, key } = router.query;
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const { mutateUser } = useUser(); const { user, isLoading, mutateUser } = useUserAuth("sign-in");
const [isSigningIn, setIsSigningIn] = useState(false);
const [errorSigningIn, setErrorSignIn] = useState<string | undefined>();
useEffect(() => { useEffect(() => {
setIsSigningIn(true); setIsSigningIn(() => false);
setErrorSignIn(undefined); setErrorSignIn(() => undefined);
if (!password || !key) return; if (!password || !key) {
authenticationService setErrorSignIn("URL is invalid");
.magicSignIn({ token: password, key }) return;
.then(async (res) => { } else {
setIsSigningIn(false); setIsSigningIn(() => true);
await mutateUser(); authenticationService
mutate(USER_WORKSPACES); .magicSignIn({ token: password, key })
if (res.user.is_onboarded) router.push("/"); .then(async (res) => {
else router.push("/invitations"); setIsSigningIn(false);
}) await mutateUser();
.catch((err) => { })
setErrorSignIn(err.response.data.error); .catch((err) => {
setIsSigningIn(false); setErrorSignIn(err.response.data.error);
}); setIsSigningIn(false);
});
}
}, [password, key, mutateUser, router]); }, [password, key, mutateUser, router]);
return ( return (
<DefaultLayout> <DefaultLayout>
<div className="h-screen w-full overflow-auto bg-brand-surface-1"> <div className="h-screen w-full overflow-auto bg-brand-surface-1">
{isSigningIn ? ( {isSigningIn ? (
<div className="flex h-full w-full flex-col items-center justify-center gap-y-2"> <div className="flex h-full w-full flex-col items-center justify-center gap-3">
<h2 className="text-4xl">Signing you in...</h2> <h2 className="text-4xl font-medium">Signing you in...</h2>
<p className="text-sm text-brand-secondary"> <p className="text-sm font-medium text-brand-secondary">
Please wait while we are preparing your take off. Please wait while we are preparing your take off.
</p> </p>
</div> </div>
) : errorSigningIn ? ( ) : errorSigningIn ? (
<div className="flex h-full w-full flex-col items-center justify-center gap-y-2"> <div className="flex h-full w-full flex-col items-center justify-center gap-3">
<h2 className="text-4xl">Error</h2> <h2 className="text-4xl font-medium">Error</h2>
<p className="text-sm text-brand-secondary"> <div className="text-sm font-medium text-brand-secondary flex gap-2">
{errorSigningIn}. <div>{errorSigningIn}.</div>
<span <span
className="cursor-pointer underline" className="cursor-pointer underline"
onClick={() => { onClick={() => {
@ -85,12 +81,14 @@ const MagicSignIn: NextPage = () => {
> >
Send link again? Send link again?
</span> </span>
</p> </div>
</div> </div>
) : ( ) : (
<div className="flex h-full w-full flex-col items-center justify-center gap-y-2"> <div className="flex h-full w-full flex-col items-center justify-center gap-y-2">
<h2 className="text-4xl">Success</h2> <h2 className="text-4xl font-medium">Success</h2>
<p className="text-sm text-brand-secondary">Redirecting you to the app...</p> <p className="text-sm font-medium text-brand-secondary">
Redirecting you to the app...
</p>
</div> </div>
)} )}
</div> </div>

7
apps/app/services/api.service.ts
View File

@ -2,7 +2,12 @@ import axios from "axios";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
const unAuthorizedStatus = [401]; const unAuthorizedStatus = [401];
const nonValidatedRoutes = ["/", "/reset-password", "/workspace-member-invitation"]; const nonValidatedRoutes = [
"/",
"/magic-sign-in",
"/reset-password",
"/workspace-member-invitation",
];
const validateRouteCheck = (route: string): boolean => { const validateRouteCheck = (route: string): boolean => {
let validationToggle = false; let validationToggle = false;