app/data/auth-provider.ts

@@ -1,37 +1,166 @@
-import { AuthProvider } from "@refinedev/core"
+import type {AuthProvider} from "@refinedev/core"
+
 import type {
     AuthActionResponse,
     CheckResponse,
+    IdentityResponse,
     OnErrorResponse
     // @ts-ignore
 } from "@refinedev/core/dist/interfaces/bindings/auth"
+import {Sdk} from "@lumeweb/portal-sdk";
+import Cookies from 'universal-cookie';
+import type {AccountInfoResponse} from "@lumeweb/portal-sdk";
 
-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" }
+export type AuthFormRequest = {
+    email: string;
+    password: string;
+    rememberMe: boolean;
+    redirectTo?: string;
+}
+
+export type RegisterFormRequest = {
+    email: string;
+    password: string;
+    firstName: string;
+    lastName: string;
+}
+
+export type Identity = {
+    id: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+}
+
+export class PortalAuthProvider implements RequiredAuthProvider {
+    private sdk: Sdk;
+
+    constructor(apiUrl: string) {
+        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) as any;
+        });
+    }
+
+    async login(params: AuthFormRequest): Promise<AuthActionResponse> {
+        const cookies = new Cookies();
+        const ret = await this.sdk.account().login({
+            email: params.email,
+            password: params.password,
+        })
+
+        let redirectTo: string | undefined;
+
+        if (ret) {
+            cookies.set('jwt', this.sdk.account().jwtToken, {path: '/'});
+            redirectTo = params.redirectTo;
+            if (!redirectTo) {
+                redirectTo = ret ? "/dashboard" : "/login";
             }
         }
+
+        return {
+            success: ret,
+            redirectTo,
+        };
+    }
+
+    async logout(params: any): Promise<AuthActionResponse> {
+        let ret = await this.sdk.account().logout();
+        if (ret) {
+            const cookies = new Cookies();
+            cookies.remove('jwt');
+        }
+        return {success: ret, redirectTo: "/login"};
+    }
+
+    async check(params?: any): Promise<CheckResponse> {
+        const cookies = new Cookies();
+
+        const jwtCookie = cookies.get('jwt');
+
+        if (jwtCookie) {
+            this.sdk.setAuthToken(jwtCookie);
+        }
+
+        const ret = await this.sdk.account().ping();
+
+        if (!ret) {
+            cookies.remove('jwt');
+        }
+
+        return {authenticated: ret, redirectTo: ret ? undefined : "/login"};
+    }
+
+    async onError(error: any): Promise<OnErrorResponse> {
+        return {logout: true};
+    }
+
+    async register(params: RegisterFormRequest): Promise<AuthActionResponse> {
+        const ret = await this.sdk.account().register({
+            email: params.email,
+            password: params.password,
+            first_name: params.firstName,
+            last_name: params.lastName,
+        });
+        return {success: ret, redirectTo: ret ? "/dashboard" : undefined};
+    }
+
+    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?: Identity): Promise<IdentityResponse> {
+        const ret = await this.sdk.account().info();
+
+        if (!ret) {
+            return {identity: null};
+        }
+
+        const acct = ret as AccountInfoResponse;
+
+        return {
+            id: acct.id,
+            firstName: acct.first_name,
+            lastName: acct.last_name,
+            email: acct.email,
+        };
+    }
+
+    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,4 +1,3 @@
-import Login from "./login";
 import {useGo, useIsAuthenticated} from "@refinedev/core";
 import {useEffect} from "react";
 
@@ -8,8 +7,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 +20,5 @@ export default function Index() {
         return <>Checking Login Status</> || null;
     }
 
-  if (data?.authenticated) {
-    return <>Redirecting</> || null;
-  }
-
-  return <Login />;
+    return (<>Redirecting</>) || null;
 }

app/routes/dashboard.tsx

@@ -1,20 +1,17 @@
-import { GeneralLayout } from "~/components/general-layout"
+import { GeneralLayout } from "~/components/general-layout";
 import {
   CloudIcon,
   CloudDownloadIcon,
-  CloudUploadSolidIcon
-} from "~/components/icons"
-import { UpgradeAccountBanner } from "~/components/upgrade-account-banner"
-import { UsageCard } from "~/components/usage-card"
-import { UsageChart } from "~/components/usage-chart"
+  CloudUploadSolidIcon,
+} from "~/components/icons";
+import { UpgradeAccountBanner } from "~/components/upgrade-account-banner";
+import { UsageCard } from "~/components/usage-card";
+import { UsageChart } from "~/components/usage-chart";
+import { Authenticated } from "@refinedev/core";
 
 export default function Dashboard() {
-  const isLogged = true
-  if (!isLogged) {
-    window.location.href = "/login"
-  }
-
   return (
+    <Authenticated key="dashboard" v3LegacyAuthProviderCompatible>
       <GeneralLayout>
         <h1 className="font-bold mb-4 text-3xl">Dashboard</h1>
         <UpgradeAccountBanner />
@@ -45,7 +42,7 @@ export default function Dashboard() {
             dataset={[
               { x: "3/2", y: "50" },
               { x: "3/3", y: "10" },
-            { x: "3/4", y: "20" }
+              { x: "3/4", y: "20" },
             ]}
             label="Storage"
           />
@@ -53,7 +50,7 @@ export default function Dashboard() {
             dataset={[
               { x: "3/2", y: "50" },
               { x: "3/3", y: "10" },
-            { x: "3/4", y: "20" }
+              { x: "3/4", y: "20" },
             ]}
             label="Download"
           />
@@ -61,11 +58,12 @@ export default function Dashboard() {
             dataset={[
               { x: "3/2", y: "50" },
               { x: "3/3", y: "10" },
-            { x: "3/4", y: "20" }
+              { x: "3/4", y: "20" },
             ]}
             label="Upload"
           />
         </div>
       </GeneralLayout>
-  )
+    </Authenticated>
+  );
 }

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, useParsed} from "@refinedev/core";
+import {AuthFormRequest} from "~/data/auth-provider.js";
+import {useEffect} from "react";
 
 export const meta: MetaFunction = () => {
     return [
@@ -17,9 +20,29 @@ export const meta: MetaFunction = () => {
     ]
 }
 
+type LoginParams = {
+    to: string;
+}
+
 export default function Login() {
     const location = useLocation()
+    const {isLoading: isAuthLoading, data: authData} = useIsAuthenticated();
     const hash = location.hash
+    const go = useGo();
+    const parsed = useParsed<LoginParams>()
+
+    useEffect(() => {
+        if (!isAuthLoading) {
+            if (authData?.authenticated) {
+                let to = "/dashboard";
+                if(parsed.params?.to){
+                    to = parsed.params.to
+                }
+
+                go({to, type: "push"});
+            }
+        }
+    }, [isAuthLoading, authData]);
 
     return (
         <div className="p-10 h-screen relative">
@@ -74,13 +97,26 @@ const LoginSchema = z.object({
 })
 
 const LoginForm = () => {
+    const login = useLogin<AuthFormRequest>()
+    const parsed = useParsed<LoginParams>()
     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",
+                redirectTo: parsed.params?.to
+            });
+        }
     })
 
     return (
@@ -114,7 +150,7 @@ const LoginForm = () => {
                     Reset Password
                 </Link>
             </p>
-      <Link to="/sign-up" className="block">
+            <Link to="/register" className="block">
                 <Button type="button" className="w-full h-14" variant={"outline"}>
                     Create an Account
                 </Button>

app/routes/register.tsx

@@ -9,13 +9,17 @@ import { Field, FieldCheckbox } from "~/components/forms"
 import { getFormProps, useForm } from "@conform-to/react"
 import { z } from "zod"
 import { getZodConstraint, parseWithZod } from "@conform-to/zod"
+import {useLogin, useRegister} from "@refinedev/core";
+import {AuthFormRequest, RegisterFormRequest} from "~/data/auth-provider.js";
 
 export const meta: MetaFunction = () => {
-  return [{ title: "Sign Up" }]
-}
+  return [{ title: "Sign Up" }];
+};
 
-const SignUpSchema = z
+const RegisterSchema = z
   .object({
+    firstName: z.string().min(1),
+    lastName: z.string().min(1),
     email: z.string().email(),
     password: z
       .string()
@@ -24,28 +28,49 @@ const SignUpSchema = z
       .string()
       .min(8, { message: "Password must be at least 8 characters" }),
     termsOfService: z.boolean({
-      required_error: "You must agree to the terms of service"
-    })
+      required_error: "You must agree to the terms of service",
+    }),
   })
   .superRefine((data, ctx) => {
     if (data.password !== data.confirmPassword) {
       return ctx.addIssue({
         code: z.ZodIssueCode.custom,
         path: ["confirmPassword"],
-        message: "Passwords do not match"
-      })
+        message: "Passwords do not match",
+      });
     }
-    return true
-  })
+    return true;
+  });
 
-export default function SignUp() {
+export default function Register() {
+    const register = useRegister<RegisterFormRequest>()
+    const login = useLogin<AuthFormRequest>();
   const [form, fields] = useForm({
-    id: "sign-up",
-    constraint: getZodConstraint(SignUpSchema),
+    id: "register",
+    constraint: getZodConstraint(RegisterSchema),
     onValidate({ formData }) {
-      return parseWithZod(formData, { schema: SignUpSchema })
+      return parseWithZod(formData, { schema: RegisterSchema });
+    },
+      onSubmit(e) {
+          e.preventDefault();
+
+          const data = Object.fromEntries(new FormData(e.currentTarget).entries());
+          register.mutate({
+              email: data.email.toString(),
+              password: data.password.toString(),
+              firstName: data.firstName.toString(),
+              lastName: data.lastName.toString(),
+          }, {
+                onSuccess: () => {
+                    login.mutate({
+                        email: data.email.toString(),
+                        password: data.password.toString(),
+                        rememberMe: false,
+                    })
                 }
             })
+          }
+    });
 
   return (
     <div className="p-10 h-screen relative">
@@ -54,21 +79,33 @@ export default function SignUp() {
       </header>
       <form
         className="w-full p-2 max-w-md space-y-4 mt-12 bg-background"
-        {...getFormProps(form)}
-      >
+        {...getFormProps(form)}>
         <span className="!mb-12 space-y-2">
           <h2 className="text-3xl font-bold">All roads lead to Lume</h2>
           <p className="text-input-placeholder">
             🤘 Get 50 GB free storage and download for free,{" "}
             <b
               className="text-primar
-        y-2"
-            >
+        y-2">
               forever
             </b>
             .{" "}
           </p>
         </span>
+        <div className="flex gap-4">
+          <Field
+            className="flex-1"
+            inputProps={{ name: fields.firstName.name }}
+            labelProps={{ children: "First Name" }}
+            errors={fields.firstName.errors}
+          />
+          <Field
+            className="flex-1"
+            inputProps={{ name: fields.lastName.name }}
+            labelProps={{ children: "Last Name" }}
+            errors={fields.lastName.errors}
+          />
+        </div>
         <Field
           inputProps={{ name: fields.email.name }}
           labelProps={{ children: "Email" }}
@@ -92,19 +129,17 @@ export default function SignUp() {
                 I agree to the
                 <Link
                   to="/terms-of-service"
-                  className="text-primary-1 text-md hover:underline hover:underline-offset-4 mx-1"
-                >
+                  className="text-primary-1 text-md hover:underline hover:underline-offset-4 mx-1">
                   Terms of Service
                 </Link>
                 and
                 <Link
                   to="/privacy-policy"
-                  className="text-primary-1 text-md hover:underline hover:underline-offset-4 mx-1"
-                >
+                  className="text-primary-1 text-md hover:underline hover:underline-offset-4 mx-1">
                   Privacy Policy
                 </Link>
               </span>
-            )
+            ),
           }}
           errors={fields.termsOfService.errors}
         />
@@ -113,8 +148,7 @@ export default function SignUp() {
           Already have an account?{" "}
           <Link
             to="/login"
-            className="text-primary-1 text-md hover:underline hover:underline-offset-4"
-          >
+            className="text-primary-1 text-md hover:underline hover:underline-offset-4">
             Login here instead →
           </Link>
         </p>
@@ -132,8 +166,7 @@ export default function SignUp() {
             <Link to="https://discord.lumeweb.com">
               <Button
                 variant={"link"}
-                className="flex flex-row gap-x-2 text-input-placeholder"
-              >
+                className="flex flex-row gap-x-2 text-input-placeholder">
                 <img className="h-5" src={discordLogoPng} alt="Discord Logo" />
                 Connect with us
               </Button>
@@ -143,8 +176,7 @@ export default function SignUp() {
             <Link to="https://lumeweb.com">
               <Button
                 variant={"link"}
-                className="flex flex-row gap-x-2 text-input-placeholder"
-              >
+                className="flex flex-row gap-x-2 text-input-placeholder">
                 <img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
                 Connect with us
               </Button>
@@ -153,5 +185,5 @@ export default function SignUp() {
         </ul>
       </footer>
     </div>
-  )
+  );
 }

app/routes/reset-password.tsx

@@ -1,31 +1,36 @@
-import type { MetaFunction } from "@remix-run/node"
-import { Link } from "@remix-run/react"
-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 } from "~/components/forms"
-import { getFormProps, useForm } from "@conform-to/react"
-import { z } from "zod"
-import { getZodConstraint, parseWithZod } from "@conform-to/zod"
+import type { MetaFunction } from "@remix-run/node";
+import { Link } from "@remix-run/react";
+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 } from "~/components/forms";
+import { getFormProps, useForm } from "@conform-to/react";
+import { z } from "zod";
+import { getZodConstraint, parseWithZod } from "@conform-to/zod";
 
 export const meta: MetaFunction = () => {
-  return [{ title: "Sign Up" }]
-}
+  return [{ title: "Sign Up" }];
+};
 
-const RecoverPasswordSchema = z
-  .object({
+const RecoverPasswordSchema = z.object({
   email: z.string().email(),
-  })
+});
 export default function RecoverPassword() {
   const [form, fields] = useForm({
     id: "sign-up",
     constraint: getZodConstraint(RecoverPasswordSchema),
     onValidate({ formData }) {
-      return parseWithZod(formData, { schema: RecoverPasswordSchema })
-    }
-  })
+      return parseWithZod(formData, { schema: RecoverPasswordSchema });
+    },
+  });
+
+  // TODO: another detail is the reset password has no screen to either accept a new pass or  
+  // just say an email has been sent.. if i were to generate  a pass for them. imho i think 
+  // a screen that just says a password reset email has been sent would be good, then a separate
+  // route to accept the reset token and send that to the api when would then trigger a new email
+  // with the pass. 
 
   return (
     <div className="p-10 h-screen relative">
@@ -34,8 +39,7 @@ export default function RecoverPassword() {
       </header>
       <form
         className="w-full p-2 max-w-md space-y-4 mt-12 bg-background"
-        {...getFormProps(form)}
-      >
+        {...getFormProps(form)}>
         <span className="!mb-12 space-y-2">
           <h2 className="text-3xl font-bold">Reset your password</h2>
         </span>
@@ -44,12 +48,11 @@ export default function RecoverPassword() {
           labelProps={{ children: "Email Address" }}
           errors={fields.email.errors}
         />
-        <Button className="w-full h-14">Create Account</Button>
+        <Button className="w-full h-14">Reset Password</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"
-          >
+            className="text-primary-1 text-md hover:underline hover:underline-offset-4">
             ← Back to Login
           </Link>
         </p>
@@ -67,8 +70,7 @@ export default function RecoverPassword() {
             <Link to="https://discord.lumeweb.com">
               <Button
                 variant={"link"}
-                className="flex flex-row gap-x-2 text-input-placeholder"
-              >
+                className="flex flex-row gap-x-2 text-input-placeholder">
                 <img className="h-5" src={discordLogoPng} alt="Discord Logo" />
                 Connect with us
               </Button>
@@ -78,8 +80,7 @@ export default function RecoverPassword() {
             <Link to="https://lumeweb.com">
               <Button
                 variant={"link"}
-                className="flex flex-row gap-x-2 text-input-placeholder"
-              >
+                className="flex flex-row gap-x-2 text-input-placeholder">
                 <img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
                 Connect with us
               </Button>
@@ -88,5 +89,5 @@ export default function RecoverPassword() {
         </ul>
       </footer>
     </div>
-  )
+  );
 }

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-20240314110748",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -39,6 +39,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "react": "^18.2.0",
+    "react-cookie": "^7.1.0",
     "react-dom": "^18.2.0",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",