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

app/data/auth-provider.ts

@@ -1,37 +1,99 @@
-import { AuthProvider } from "@refinedev/core"
+import type {AuthProvider} from "@refinedev/core"
-import type {
-  AuthActionResponse,
-  CheckResponse,
-  OnErrorResponse
-  // @ts-ignore
-} from "@refinedev/core/dist/interfaces/bindings/auth"
 
-export const authProvider: AuthProvider = {
+// @ts-ignore
-  login: async (params: any) => {
+import type {AuthActionResponse, CheckResponse, OnErrorResponse} from "@refinedev/core/dist/interfaces/bindings/auth"
-    return { success: true } satisfies AuthActionResponse
+import {Sdk} from "@lumeweb/portal-sdk";
-  },
+
-  logout: async (params: any) => {
+export type AuthFormRequest = {
-    return { success: true } satisfies AuthActionResponse
+    email: string;
-  },
+    password: string;
-  check: async (params?: any) => {
+    rememberMe: boolean;
-    return { authenticated: true } satisfies CheckResponse
+}
-  },
+
-  onError: async (error: any) => {
+export class PortalAuthProvider implements RequiredAuthProvider {
-    return { logout: true } satisfies OnErrorResponse
+    private apiUrl: string;
-  },
+    private sdk: Sdk;
-  register: async (params: any) => {
+
-    return { success: true } satisfies AuthActionResponse
+    constructor(apiUrl: string) {
-  },
+        this.apiUrl = apiUrl;
-  forgotPassword: async (params: any) => {
+        this.sdk = Sdk.create(apiUrl);
-    return { success: true } satisfies AuthActionResponse
+
-  },
+        const methods: Array<keyof AuthProvider> = [
-  updatePassword: async (params: any) => {
+            'login',
-    return { success: true } satisfies AuthActionResponse
+            'logout',
-  },
+            'check',
-  getPermissions: async (params: any) => {
+            'onError',
-    return { success: true } satisfies AuthActionResponse
+            'register',
-  },
+            'forgotPassword',
-  getIdentity: async (params: any) => {
+            'updatePassword',
-    return { id: "1", fullName: "John Doe", avatar: "https://via.placeholder.com/150" }
+            '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'];
+}

app/root.tsx

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

app/routes/_index.tsx

@@ -1,15 +1,19 @@
 import Login from "./login";
-import { useGo, useIsAuthenticated } from "@refinedev/core";
+import {useGo, useIsAuthenticated} from "@refinedev/core";
-import { useEffect } from "react";
+import {useEffect} from "react";
 
 export default function Index() {
-  const { isLoading, data } = useIsAuthenticated();
+    const {isLoading, data} = useIsAuthenticated();
 
     const go = useGo();
 
     useEffect(() => {
-    if (!isLoading && data?.authenticated) {
+        if (!isLoading) {
-      go({ to: "/dashboard", type: "replace" });
+            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 <>Redirecting</> || null;
-  }
-
-  return <Login />;
 }

app/routes/login.tsx

@@ -1,30 +1,44 @@
-import type { MetaFunction } from "@remix-run/node"
+import type {MetaFunction} from "@remix-run/node"
-import { Link, useLocation } from "@remix-run/react"
+import {Link, useLocation} from "@remix-run/react"
-import { z } from "zod"
+import {z} from "zod"
-import { Button } from "~/components/ui/button"
+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 {Field, FieldCheckbox} from "~/components/forms"
-import { getFormProps, useForm } from "@conform-to/react"
+import {getFormProps, useForm} from "@conform-to/react"
-import { getZodConstraint, parseWithZod } from "@conform-to/zod"
+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" },
+        {title: "Login"},
-    { name: "description", content: "Welcome to Lume!" }
+        {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 === "" && <LoginForm/>}
-      {hash === "#otp" && <OtpForm />}
+            {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 }) {
+        onValidate({formData}) {
-      return parseWithZod(formData, { schema: LoginSchema })
+            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 }}
+                inputProps={{name: fields.email.name}}
-        labelProps={{ children: "Email" }}
+                labelProps={{children: "Email"}}
                 errors={fields.email.errors}
             />
             <Field
-        inputProps={{ name: fields.password.name, type: "password" }}
+                inputProps={{name: fields.password.name, type: "password"}}
-        labelProps={{ children: "Password" }}
+                labelProps={{children: "Password"}}
                 errors={fields.password.errors}
             />
             <FieldCheckbox
-        inputProps={{ name: fields.rememberMe.name, form: form.id }}
+                inputProps={{name: fields.rememberMe.name, form: form.id}}
-        labelProps={{ children: "Remember Me" }}
+                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 }) {
+        onValidate({formData}) {
-      return parseWithZod(formData, { schema: OtpSchema })
+            return parseWithZod(formData, {schema: OtpSchema})
         },
         shouldValidate: "onSubmit"
     })
@@ -161,8 +187,8 @@ const OtpForm = () => {
         </p>
       </span>
             <Field
-        inputProps={{ name: fields.otp.name }}
+                inputProps={{name: fields.otp.name}}
-        labelProps={{ children: "Confirmation Code" }}
+                labelProps={{children: "Confirmation Code"}}
                 errors={fields.otp.errors}
             />
             <Button className="w-full h-14">Verify</Button>

package.json

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