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

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

@@ -8,8 +8,12 @@ export default function Index() {
     const go = useGo();
 
     useEffect(() => {
-    if (!isLoading && data?.authenticated) {
+        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;
 }

app/routes/login.tsx

@@ -9,6 +9,9 @@ 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 {useGo, useIsAuthenticated, useLogin} from "@refinedev/core";
+import {AuthFormRequest} from "~/data/auth-provider.js";
+import {useEffect} from "react";
 
 export const meta: MetaFunction = () => {
     return [
@@ -19,7 +22,18 @@ export const meta: MetaFunction = () => {
 
 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">
@@ -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})
         },
-    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 (

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