feat: setup auth provider and refine with login, check and logout methods
This commit is contained in:
parent
7032892686
commit
51618a2fda
GPG Key ID:
C997C339BE476FF2
|
|
@ -1,37 +1,99 @@
|
|||
import { AuthProvider } from "@refinedev/core"
|
||||
import type {
|
||||
AuthActionResponse,
|
||||
CheckResponse,
|
||||
OnErrorResponse
|
||||
// @ts-ignore
|
||||
} from "@refinedev/core/dist/interfaces/bindings/auth"
|
||||
import type {AuthProvider} from "@refinedev/core"
|
||||
|
||||
export const authProvider: AuthProvider = {
|
||||
login: async (params: any) => {
|
||||
return { success: true } satisfies AuthActionResponse
|
||||
},
|
||||
logout: async (params: any) => {
|
||||
return { success: true } satisfies AuthActionResponse
|
||||
},
|
||||
check: async (params?: any) => {
|
||||
return { authenticated: true } satisfies CheckResponse
|
||||
},
|
||||
onError: async (error: any) => {
|
||||
return { logout: true } satisfies OnErrorResponse
|
||||
},
|
||||
register: async (params: any) => {
|
||||
return { success: true } satisfies AuthActionResponse
|
||||
},
|
||||
forgotPassword: async (params: any) => {
|
||||
return { success: true } satisfies AuthActionResponse
|
||||
},
|
||||
updatePassword: async (params: any) => {
|
||||
return { success: true } satisfies AuthActionResponse
|
||||
},
|
||||
getPermissions: async (params: any) => {
|
||||
return { success: true } satisfies AuthActionResponse
|
||||
},
|
||||
getIdentity: async (params: any) => {
|
||||
return { id: "1", fullName: "John Doe", avatar: "https://via.placeholder.com/150" }
|
||||
}
|
||||
// @ts-ignore
|
||||
import type {AuthActionResponse, CheckResponse, OnErrorResponse} from "@refinedev/core/dist/interfaces/bindings/auth"
|
||||
import {Sdk} from "@lumeweb/portal-sdk";
|
||||
|
||||
export type AuthFormRequest = {
|
||||
email: string;
|
||||
password: string;
|
||||
rememberMe: boolean;
|
||||
}
|
||||
|
||||
export class PortalAuthProvider implements RequiredAuthProvider {
|
||||
private apiUrl: string;
|
||||
private sdk: Sdk;
|
||||
|
||||
constructor(apiUrl: string) {
|
||||
this.apiUrl = apiUrl;
|
||||
this.sdk = Sdk.create(apiUrl);
|
||||
|
||||
const methods: Array<keyof AuthProvider> = [
|
||||
'login',
|
||||
'logout',
|
||||
'check',
|
||||
'onError',
|
||||
'register',
|
||||
'forgotPassword',
|
||||
'updatePassword',
|
||||
'getPermissions',
|
||||
'getIdentity',
|
||||
];
|
||||
|
||||
methods.forEach((method) => {
|
||||
this[method] = this[method]?.bind(this);
|
||||
});
|
||||
}
|
||||
|
||||
async login(params: AuthFormRequest): Promise<AuthActionResponse> {
|
||||
const ret = await this.sdk.account().login({
|
||||
email: params.email,
|
||||
password: params.password,
|
||||
})
|
||||
return {
|
||||
success: ret,
|
||||
redirectTo: ret ? "/dashboard" : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
async logout(params: any): Promise<AuthActionResponse> {
|
||||
let ret = await this.sdk.account().logout();
|
||||
return {success: ret, redirectTo: "/login"};
|
||||
}
|
||||
|
||||
async check(params?: any): Promise<CheckResponse> {
|
||||
const ret = await this.sdk.account().ping();
|
||||
|
||||
return {authenticated: ret};
|
||||
}
|
||||
|
||||
async onError(error: any): Promise<OnErrorResponse> {
|
||||
return {logout: true};
|
||||
}
|
||||
|
||||
async register(params: any): Promise<AuthActionResponse> {
|
||||
return {success: true};
|
||||
}
|
||||
|
||||
async forgotPassword(params: any): Promise<AuthActionResponse> {
|
||||
return {success: true};
|
||||
}
|
||||
|
||||
async updatePassword(params: any): Promise<AuthActionResponse> {
|
||||
return {success: true};
|
||||
}
|
||||
|
||||
async getPermissions(params?: Record<string, any>): Promise<AuthActionResponse> {
|
||||
return {success: true};
|
||||
}
|
||||
|
||||
async getIdentity(params?: any): Promise<AuthActionResponse> {
|
||||
return {id: "1", fullName: "John Doe", avatar: "https://via.placeholder.com/150"};
|
||||
}
|
||||
|
||||
public static create(apiUrl: string): AuthProvider {
|
||||
return new PortalAuthProvider(apiUrl);
|
||||
}
|
||||
}
|
||||
|
||||
interface RequiredAuthProvider extends AuthProvider {
|
||||
login: AuthProvider['login'];
|
||||
logout: AuthProvider['logout'];
|
||||
check: AuthProvider['check'];
|
||||
onError: AuthProvider['onError'];
|
||||
register: AuthProvider['register'];
|
||||
forgotPassword: AuthProvider['forgotPassword'];
|
||||
updatePassword: AuthProvider['updatePassword'];
|
||||
getPermissions: AuthProvider['getPermissions'];
|
||||
getIdentity: AuthProvider['getIdentity'];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import type { LinksFunction } from "@remix-run/node";
|
|||
// Supports weights 200-800
|
||||
import '@fontsource-variable/manrope';
|
||||
import {Refine} from "@refinedev/core";
|
||||
import {authProvider} from "~/data/auth-provider.js";
|
||||
import {PortalAuthProvider} from "~/data/auth-provider.js";
|
||||
import routerProvider from "@refinedev/remix-router";
|
||||
|
||||
export const links: LinksFunction = () => [
|
||||
|
|
@ -40,7 +40,7 @@ export function Layout({children}: { children: React.ReactNode }) {
|
|||
export default function App() {
|
||||
return (
|
||||
<Refine
|
||||
authProvider={authProvider}
|
||||
authProvider={PortalAuthProvider.create("https://alpha.pinner.xyz")}
|
||||
routerProvider={routerProvider}
|
||||
>
|
||||
<Outlet/>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
import Login from "./login";
|
||||
import { useGo, useIsAuthenticated } from "@refinedev/core";
|
||||
import { useEffect } from "react";
|
||||
import {useGo, useIsAuthenticated} from "@refinedev/core";
|
||||
import {useEffect} from "react";
|
||||
|
||||
export default function Index() {
|
||||
const { isLoading, data } = useIsAuthenticated();
|
||||
const {isLoading, data} = useIsAuthenticated();
|
||||
|
||||
const go = useGo();
|
||||
const go = useGo();
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading && data?.authenticated) {
|
||||
go({ to: "/dashboard", type: "replace" });
|
||||
useEffect(() => {
|
||||
if (!isLoading) {
|
||||
if (data?.authenticated) {
|
||||
go({to: "/dashboard", type: "replace"});
|
||||
} else {
|
||||
go({to: "/login", type: "replace"});
|
||||
}
|
||||
}
|
||||
}, [isLoading, data]);
|
||||
|
||||
if (isLoading) {
|
||||
return <>Checking Login Status</> || null;
|
||||
}
|
||||
}, [isLoading, data]);
|
||||
|
||||
if (isLoading) {
|
||||
return <>Checking Login Status</> || null;
|
||||
}
|
||||
|
||||
if (data?.authenticated) {
|
||||
return <>Redirecting</> || null;
|
||||
}
|
||||
|
||||
return <Login />;
|
||||
return (<>Redirecting</>) || null;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,179 +1,205 @@
|
|||
import type { MetaFunction } from "@remix-run/node"
|
||||
import { Link, useLocation } from "@remix-run/react"
|
||||
import { z } from "zod"
|
||||
import { Button } from "~/components/ui/button"
|
||||
import type {MetaFunction} from "@remix-run/node"
|
||||
import {Link, useLocation} from "@remix-run/react"
|
||||
import {z} from "zod"
|
||||
import {Button} from "~/components/ui/button"
|
||||
import logoPng from "~/images/lume-logo.png?url"
|
||||
import lumeColorLogoPng from "~/images/lume-color-logo.png?url"
|
||||
import discordLogoPng from "~/images/discord-logo.png?url"
|
||||
import lumeBgPng from "~/images/lume-bg-image.png?url"
|
||||
import { Field, FieldCheckbox } from "~/components/forms"
|
||||
import { getFormProps, useForm } from "@conform-to/react"
|
||||
import { getZodConstraint, parseWithZod } from "@conform-to/zod"
|
||||
import {Field, FieldCheckbox} from "~/components/forms"
|
||||
import {getFormProps, useForm} from "@conform-to/react"
|
||||
import {getZodConstraint, parseWithZod} from "@conform-to/zod"
|
||||
import {useGo, useIsAuthenticated, useLogin} from "@refinedev/core";
|
||||
import {AuthFormRequest} from "~/data/auth-provider.js";
|
||||
import {useEffect} from "react";
|
||||
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "Login" },
|
||||
{ name: "description", content: "Welcome to Lume!" }
|
||||
]
|
||||
return [
|
||||
{title: "Login"},
|
||||
{name: "description", content: "Welcome to Lume!"}
|
||||
]
|
||||
}
|
||||
|
||||
export default function Login() {
|
||||
const location = useLocation()
|
||||
const hash = location.hash
|
||||
const location = useLocation()
|
||||
const {isLoading: isAuthLoading, data: authData} = useIsAuthenticated();
|
||||
const auth = useIsAuthenticated();
|
||||
const hash = location.hash
|
||||
const go = useGo();
|
||||
|
||||
return (
|
||||
<div className="p-10 h-screen relative">
|
||||
<header>
|
||||
<img src={logoPng} alt="Lume logo" className="h-10" />
|
||||
</header>
|
||||
<div className="fixed inset-0 -z-10 overflow-clip">
|
||||
<img
|
||||
src={lumeBgPng}
|
||||
alt="Lume background"
|
||||
className="absolute top-0 right-0 md:w-2/3 object-cover z-[-1]"
|
||||
/>
|
||||
</div>
|
||||
useEffect(() => {
|
||||
if (!isAuthLoading) {
|
||||
if (authData?.authenticated) {
|
||||
go({to: "/dashboard", type: "replace"});
|
||||
}
|
||||
}
|
||||
}, [isAuthLoading, authData]);
|
||||
|
||||
{hash === "" && <LoginForm />}
|
||||
{hash === "#otp" && <OtpForm />}
|
||||
return (
|
||||
<div className="p-10 h-screen relative">
|
||||
<header>
|
||||
<img src={logoPng} alt="Lume logo" className="h-10"/>
|
||||
</header>
|
||||
<div className="fixed inset-0 -z-10 overflow-clip">
|
||||
<img
|
||||
src={lumeBgPng}
|
||||
alt="Lume background"
|
||||
className="absolute top-0 right-0 md:w-2/3 object-cover z-[-1]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<footer className="my-5">
|
||||
<ul className="flex flex-row">
|
||||
<li>
|
||||
<Link to="https://discord.lumeweb.com">
|
||||
<Button
|
||||
variant={"link"}
|
||||
className="flex flex-row gap-x-2 text-input-placeholder"
|
||||
>
|
||||
<img className="h-5" src={discordLogoPng} alt="Discord Logo" />
|
||||
Connect with us
|
||||
</Button>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="https://lumeweb.com">
|
||||
<Button
|
||||
variant={"link"}
|
||||
className="flex flex-row gap-x-2 text-input-placeholder"
|
||||
>
|
||||
<img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
|
||||
Connect with us
|
||||
</Button>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
{hash === "" && <LoginForm/>}
|
||||
{hash === "#otp" && <OtpForm/>}
|
||||
|
||||
<footer className="my-5">
|
||||
<ul className="flex flex-row">
|
||||
<li>
|
||||
<Link to="https://discord.lumeweb.com">
|
||||
<Button
|
||||
variant={"link"}
|
||||
className="flex flex-row gap-x-2 text-input-placeholder"
|
||||
>
|
||||
<img className="h-5" src={discordLogoPng} alt="Discord Logo"/>
|
||||
Connect with us
|
||||
</Button>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="https://lumeweb.com">
|
||||
<Button
|
||||
variant={"link"}
|
||||
className="flex flex-row gap-x-2 text-input-placeholder"
|
||||
>
|
||||
<img className="h-5" src={lumeColorLogoPng} alt="Lume Logo"/>
|
||||
Connect with us
|
||||
</Button>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const LoginSchema = z.object({
|
||||
email: z.string().email(),
|
||||
password: z.string(),
|
||||
rememberMe: z.boolean()
|
||||
email: z.string().email(),
|
||||
password: z.string(),
|
||||
rememberMe: z.boolean()
|
||||
})
|
||||
|
||||
const LoginForm = () => {
|
||||
const [form, fields] = useForm({
|
||||
id: "login",
|
||||
constraint: getZodConstraint(LoginSchema),
|
||||
onValidate({ formData }) {
|
||||
return parseWithZod(formData, { schema: LoginSchema })
|
||||
},
|
||||
shouldValidate: "onSubmit"
|
||||
})
|
||||
const login = useLogin<AuthFormRequest>()
|
||||
|
||||
return (
|
||||
<form
|
||||
className="w-full p-2 max-w-md space-y-3 mt-12 bg-background"
|
||||
{...getFormProps(form)}
|
||||
>
|
||||
<h2 className="text-3xl font-bold !mb-12">Welcome back! 🎉</h2>
|
||||
<Field
|
||||
inputProps={{ name: fields.email.name }}
|
||||
labelProps={{ children: "Email" }}
|
||||
errors={fields.email.errors}
|
||||
/>
|
||||
<Field
|
||||
inputProps={{ name: fields.password.name, type: "password" }}
|
||||
labelProps={{ children: "Password" }}
|
||||
errors={fields.password.errors}
|
||||
/>
|
||||
<FieldCheckbox
|
||||
inputProps={{ name: fields.rememberMe.name, form: form.id }}
|
||||
labelProps={{ children: "Remember Me" }}
|
||||
errors={fields.rememberMe.errors}
|
||||
/>
|
||||
<Button className="w-full h-14">Login</Button>
|
||||
<p className="inline-block text-input-placeholder">
|
||||
Forgot your password?{" "}
|
||||
<Link
|
||||
to="/reset-password"
|
||||
className="text-primary-1 text-md hover:underline hover:underline-offset-4"
|
||||
const [form, fields] = useForm({
|
||||
id: "login",
|
||||
constraint: getZodConstraint(LoginSchema),
|
||||
onValidate({formData}) {
|
||||
return parseWithZod(formData, {schema: LoginSchema})
|
||||
},
|
||||
shouldValidate: "onSubmit",
|
||||
onSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const data = Object.fromEntries(new FormData(e.currentTarget).entries());
|
||||
login.mutate({
|
||||
email: data.email.toString(),
|
||||
password: data.password.toString(),
|
||||
rememberMe: data.rememberMe.toString() === "on"
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<form
|
||||
className="w-full p-2 max-w-md space-y-3 mt-12 bg-background"
|
||||
{...getFormProps(form)}
|
||||
>
|
||||
Reset Password
|
||||
</Link>
|
||||
</p>
|
||||
<Link to="/sign-up" className="block">
|
||||
<Button type="button" className="w-full h-14" variant={"outline"}>
|
||||
Create an Account
|
||||
</Button>
|
||||
</Link>
|
||||
</form>
|
||||
)
|
||||
<h2 className="text-3xl font-bold !mb-12">Welcome back! 🎉</h2>
|
||||
<Field
|
||||
inputProps={{name: fields.email.name}}
|
||||
labelProps={{children: "Email"}}
|
||||
errors={fields.email.errors}
|
||||
/>
|
||||
<Field
|
||||
inputProps={{name: fields.password.name, type: "password"}}
|
||||
labelProps={{children: "Password"}}
|
||||
errors={fields.password.errors}
|
||||
/>
|
||||
<FieldCheckbox
|
||||
inputProps={{name: fields.rememberMe.name, form: form.id}}
|
||||
labelProps={{children: "Remember Me"}}
|
||||
errors={fields.rememberMe.errors}
|
||||
/>
|
||||
<Button className="w-full h-14">Login</Button>
|
||||
<p className="inline-block text-input-placeholder">
|
||||
Forgot your password?{" "}
|
||||
<Link
|
||||
to="/reset-password"
|
||||
className="text-primary-1 text-md hover:underline hover:underline-offset-4"
|
||||
>
|
||||
Reset Password
|
||||
</Link>
|
||||
</p>
|
||||
<Link to="/sign-up" className="block">
|
||||
<Button type="button" className="w-full h-14" variant={"outline"}>
|
||||
Create an Account
|
||||
</Button>
|
||||
</Link>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
const OtpSchema = z.object({
|
||||
otp: z.string().length(6, { message: "OTP must be 6 characters" })
|
||||
otp: z.string().length(6, {message: "OTP must be 6 characters"})
|
||||
})
|
||||
|
||||
const OtpForm = () => {
|
||||
// TODO: Add support for resending the OTP
|
||||
const [form, fields] = useForm({
|
||||
id: "otp",
|
||||
constraint: getZodConstraint(OtpSchema),
|
||||
onValidate({ formData }) {
|
||||
return parseWithZod(formData, { schema: OtpSchema })
|
||||
},
|
||||
shouldValidate: "onSubmit"
|
||||
})
|
||||
const valid = false // TODO: some sort of logic to verify user is on OTP state validly
|
||||
// TODO: Add support for resending the OTP
|
||||
const [form, fields] = useForm({
|
||||
id: "otp",
|
||||
constraint: getZodConstraint(OtpSchema),
|
||||
onValidate({formData}) {
|
||||
return parseWithZod(formData, {schema: OtpSchema})
|
||||
},
|
||||
shouldValidate: "onSubmit"
|
||||
})
|
||||
const valid = false // TODO: some sort of logic to verify user is on OTP state validly
|
||||
|
||||
if (!valid) {
|
||||
location.hash = ""
|
||||
return null
|
||||
}
|
||||
if (!valid) {
|
||||
location.hash = ""
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<form
|
||||
className="w-full p-2 max-w-md mt-12 bg-background"
|
||||
{...getFormProps(form)}
|
||||
>
|
||||
return (
|
||||
<form
|
||||
className="w-full p-2 max-w-md mt-12 bg-background"
|
||||
{...getFormProps(form)}
|
||||
>
|
||||
<span className="block !mb-8 space-y-2">
|
||||
<h2 className="text-3xl font-bold">Check your inbox</h2>
|
||||
<p className="text-input-placeholder">
|
||||
We will need the six digit confirmation code you received in your
|
||||
email in order to verify your account and get started. Didn’t receive
|
||||
a code?{" "}
|
||||
<Button type="button" variant={"link"} className="text-md h-0">
|
||||
<Button type="button" variant={"link"} className="text-md h-0">
|
||||
Resend now →
|
||||
</Button>
|
||||
</p>
|
||||
</span>
|
||||
<Field
|
||||
inputProps={{ name: fields.otp.name }}
|
||||
labelProps={{ children: "Confirmation Code" }}
|
||||
errors={fields.otp.errors}
|
||||
/>
|
||||
<Button className="w-full h-14">Verify</Button>
|
||||
<p className="text-input-placeholder w-full text-left">
|
||||
<Link
|
||||
to="/login"
|
||||
className="text-primary-1 text-md hover:underline hover:underline-offset-4"
|
||||
>
|
||||
← Back to Login
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
)
|
||||
<Field
|
||||
inputProps={{name: fields.otp.name}}
|
||||
labelProps={{children: "Confirmation Code"}}
|
||||
errors={fields.otp.errors}
|
||||
/>
|
||||
<Button className="w-full h-14">Verify</Button>
|
||||
<p className="text-input-placeholder w-full text-left">
|
||||
<Link
|
||||
to="/login"
|
||||
className="text-primary-1 text-md hover:underline hover:underline-offset-4"
|
||||
>
|
||||
← Back to Login
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -14,7 +14,7 @@
|
|||
"@conform-to/react": "^1.0.2",
|
||||
"@conform-to/zod": "^1.0.2",
|
||||
"@fontsource-variable/manrope": "^5.0.19",
|
||||
"@lumeweb/portal-sdk": "^0.0.0-20240306231947",
|
||||
"@lumeweb/portal-sdk": "0.0.0-20240313171219",
|
||||
"@radix-ui/react-avatar": "^1.0.4",
|
||||
"@radix-ui/react-checkbox": "^1.0.4",
|
||||
"@radix-ui/react-dialog": "^1.0.5",
|
||||
|
|
|
|||
Loading…
Reference in New Issue