LumeWeb
/
portal-dashboard
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

feat: setup auth provider and refine with login, check and logout methods

This commit is contained in:
Derrick Hammer 2024-03-13 13:16:52 -04:00
parent 7032892686
commit 51618a2fda
Signed by: pcfreak30
GPG Key ID: C997C339BE476FF2
6 changed files with 18990 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
app/data/auth-provider.ts
View File

@ -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'];
}

4
app/root.tsx
View File

@ -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/>

20
app/routes/_index.tsx
View File

@ -1,15 +1,19 @@
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();
useEffect(() => {
if (!isLoading && data?.authenticated) {
go({ to: "/dashboard", type: "replace" });
if (!isLoading) {
if (data?.authenticated) {
go({to: "/dashboard", type: "replace"});
} else {
go({to: "/login", type: "replace"});
}
}
}, [isLoading, data]);
@ -17,9 +21,5 @@ export default function Index() {
return <>Checking Login Status</> || null;
}
if (data?.authenticated) {
return <>Redirecting</> || null;
}
return <Login />;
return (<>Redirecting</>) || null;
}

82
app/routes/login.tsx
View File

@ -1,30 +1,44 @@
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!" }
{title: "Login"},
{name: "description", content: "Welcome to Lume!"}
]
}
export default function Login() {
const location = useLocation()
const {isLoading: isAuthLoading, data: authData} = useIsAuthenticated();
const auth = useIsAuthenticated();
const hash = location.hash
const go = useGo();
useEffect(() => {
if (!isAuthLoading) {
if (authData?.authenticated) {
go({to: "/dashboard", type: "replace"});
}
}
}, [isAuthLoading, authData]);
return (
<div className="p-10 h-screen relative">
<header>
<img src={logoPng} alt="Lume logo" className="h-10" />
<img src={logoPng} alt="Lume logo" className="h-10"/>
</header>
<div className="fixed inset-0 -z-10 overflow-clip">
<img
@ -34,8 +48,8 @@ export default function Login() {
/>
</div>
{hash === "" && <LoginForm />}
{hash === "#otp" && <OtpForm />}
{hash === "" && <LoginForm/>}
{hash === "#otp" && <OtpForm/>}
<footer className="my-5">
<ul className="flex flex-row">
@ -45,7 +59,7 @@ export default function Login() {
variant={"link"}
className="flex flex-row gap-x-2 text-input-placeholder"
>
<img className="h-5" src={discordLogoPng} alt="Discord Logo" />
<img className="h-5" src={discordLogoPng} alt="Discord Logo"/>
Connect with us
</Button>
</Link>
@ -56,7 +70,7 @@ export default function Login() {
variant={"link"}
className="flex flex-row gap-x-2 text-input-placeholder"
>
<img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
<img className="h-5" src={lumeColorLogoPng} alt="Lume Logo"/>
Connect with us
</Button>
</Link>
@ -74,13 +88,25 @@ const LoginSchema = z.object({
})
const LoginForm = () => {
const login = useLogin<AuthFormRequest>()
const [form, fields] = useForm({
id: "login",
constraint: getZodConstraint(LoginSchema),
onValidate({ formData }) {
return parseWithZod(formData, { schema: LoginSchema })
onValidate({formData}) {
return parseWithZod(formData, {schema: LoginSchema})
},
shouldValidate: "onSubmit"
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 (
@ -90,18 +116,18 @@ const LoginForm = () => {
>
<h2 className="text-3xl font-bold !mb-12">Welcome back! 🎉</h2>
<Field
inputProps={{ name: fields.email.name }}
labelProps={{ children: "Email" }}
inputProps={{name: fields.email.name}}
labelProps={{children: "Email"}}
errors={fields.email.errors}
/>
<Field
inputProps={{ name: fields.password.name, type: "password" }}
labelProps={{ children: "Password" }}
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" }}
inputProps={{name: fields.rememberMe.name, form: form.id}}
labelProps={{children: "Remember Me"}}
errors={fields.rememberMe.errors}
/>
<Button className="w-full h-14">Login</Button>
@ -124,7 +150,7 @@ const LoginForm = () => {
}
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 = () => {
@ -132,8 +158,8 @@ const OtpForm = () => {
const [form, fields] = useForm({
id: "otp",
constraint: getZodConstraint(OtpSchema),
onValidate({ formData }) {
return parseWithZod(formData, { schema: OtpSchema })
onValidate({formData}) {
return parseWithZod(formData, {schema: OtpSchema})
},
shouldValidate: "onSubmit"
})
@ -161,8 +187,8 @@ const OtpForm = () => {
</p>
</span>
<Field
inputProps={{ name: fields.otp.name }}
labelProps={{ children: "Confirmation Code" }}
inputProps={{name: fields.otp.name}}
labelProps={{children: "Confirmation Code"}}
errors={fields.otp.errors}
/>
<Button className="w-full h-14">Verify</Button>

18707
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -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",