app/data/auth-provider.ts

@@ -1,166 +1,37 @@
-import type {AuthProvider} from "@refinedev/core"
+import { 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 type AuthFormRequest = {
+export const authProvider: AuthProvider = {
-    email: string;
+  login: async (params: any) => {
-    password: string;
+    return { success: true } satisfies AuthActionResponse
-    rememberMe: boolean;
+  },
-    redirectTo?: string;
+  logout: async (params: any) => {
-}
+    return { success: true } satisfies AuthActionResponse
-
+  },
-export type RegisterFormRequest = {
+  check: async (params?: any) => {
-    email: string;
+    return { authenticated: true } satisfies CheckResponse
-    password: string;
+  },
-    firstName: string;
+  onError: async (error: any) => {
-    lastName: string;
+    return { logout: true } satisfies OnErrorResponse
-}
+  },
-
+  register: async (params: any) => {
-export type Identity = {
+    return { success: true } satisfies AuthActionResponse
-    id: string;
+  },
-    firstName: string;
+  forgotPassword: async (params: any) => {
-    lastName: string;
+    return { success: true } satisfies AuthActionResponse
-    email: string;
+  },
-}
+  updatePassword: async (params: any) => {
-
+    return { success: true } satisfies AuthActionResponse
-export class PortalAuthProvider implements RequiredAuthProvider {
+  },
-    private sdk: Sdk;
+  getPermissions: async (params: any) => {
-
+    return { success: true } satisfies AuthActionResponse
-    constructor(apiUrl: string) {
+  },
-        this.sdk = Sdk.create(apiUrl);
+  getIdentity: async (params: any) => {
-
+    return { id: "1", fullName: "John Doe", avatar: "https://via.placeholder.com/150" }
-        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 {PortalAuthProvider} from "~/data/auth-provider.js";
+import {authProvider} 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={PortalAuthProvider.create("https://alpha.pinner.xyz")}
+            authProvider={authProvider}
             routerProvider={routerProvider}
         >
             <Outlet/>

app/routes/_index.tsx

@@ -1,3 +1,4 @@
+import Login from "./login";
 import { useGo, useIsAuthenticated } from "@refinedev/core";
 import { useEffect } from "react";
 
@@ -7,12 +8,8 @@ export default function Index() {
   const go = useGo();
 
   useEffect(() => {
-        if (!isLoading) {
+    if (!isLoading && data?.authenticated) {
-            if (data?.authenticated) {
       go({ to: "/dashboard", type: "replace" });
-            } else {
-                go({to: "/login", type: "replace"});
-            }
     }
   }, [isLoading, data]);
 
@@ -20,5 +17,9 @@ export default function Index() {
     return <>Checking Login Status</> || null;
   }
 
-    return (<>Redirecting</>) || null;
+  if (data?.authenticated) {
+    return <>Redirecting</> || null;
+  }
+
+  return <Login />;
 }

app/routes/dashboard.tsx

@@ -1,17 +1,20 @@
-import { GeneralLayout } from "~/components/general-layout";
+import { GeneralLayout } from "~/components/general-layout"
 import {
   CloudIcon,
   CloudDownloadIcon,
-  CloudUploadSolidIcon,
+  CloudUploadSolidIcon
-} from "~/components/icons";
+} from "~/components/icons"
-import { UpgradeAccountBanner } from "~/components/upgrade-account-banner";
+import { UpgradeAccountBanner } from "~/components/upgrade-account-banner"
-import { UsageCard } from "~/components/usage-card";
+import { UsageCard } from "~/components/usage-card"
-import { UsageChart } from "~/components/usage-chart";
+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 />
@@ -42,7 +45,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"
         />
@@ -50,7 +53,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"
         />
@@ -58,12 +61,11 @@ 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,9 +9,6 @@ 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 [
@@ -20,29 +17,9 @@ 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">
@@ -97,26 +74,13 @@ 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 (
@@ -150,7 +114,7 @@ const LoginForm = () => {
           Reset Password
         </Link>
       </p>
-            <Link to="/register" className="block">
+      <Link to="/sign-up" className="block">
         <Button type="button" className="w-full h-14" variant={"outline"}>
           Create an Account
         </Button>

app/routes/reset-password.tsx

@@ -1,36 +1,31 @@
-import type { MetaFunction } from "@remix-run/node";
+import type { MetaFunction } from "@remix-run/node"
-import { Link } from "@remix-run/react";
+import { Link } from "@remix-run/react"
-import { Button } from "~/components/ui/button";
+import { Button } from "~/components/ui/button"
-import logoPng from "~/images/lume-logo.png?url";
+import logoPng from "~/images/lume-logo.png?url"
-import lumeColorLogoPng from "~/images/lume-color-logo.png?url";
+import lumeColorLogoPng from "~/images/lume-color-logo.png?url"
-import discordLogoPng from "~/images/discord-logo.png?url";
+import discordLogoPng from "~/images/discord-logo.png?url"
-import lumeBgPng from "~/images/lume-bg-image.png?url";
+import lumeBgPng from "~/images/lume-bg-image.png?url"
-import { Field } from "~/components/forms";
+import { Field } from "~/components/forms"
-import { getFormProps, useForm } from "@conform-to/react";
+import { getFormProps, useForm } from "@conform-to/react"
-import { z } from "zod";
+import { z } from "zod"
-import { getZodConstraint, parseWithZod } from "@conform-to/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">
@@ -39,7 +34,8 @@ 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>
@@ -48,11 +44,12 @@ export default function RecoverPassword() {
           labelProps={{ children: "Email Address" }}
           errors={fields.email.errors}
         />
-        <Button className="w-full h-14">Reset Password</Button>
+        <Button className="w-full h-14">Create Account</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>
@@ -70,7 +67,8 @@ 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>
@@ -80,7 +78,8 @@ 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>
@@ -89,5 +88,5 @@ export default function RecoverPassword() {
         </ul>
       </footer>
     </div>
-  );
+  )
 }

app/routes/sign-up.tsx

@@ -9,17 +9,13 @@ 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 RegisterSchema = z
+const SignUpSchema = z
   .object({
-    firstName: z.string().min(1),
-    lastName: z.string().min(1),
     email: z.string().email(),
     password: z
       .string()
@@ -28,49 +24,28 @@ const RegisterSchema = 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 Register() {
+export default function SignUp() {
-    const register = useRegister<RegisterFormRequest>()
-    const login = useLogin<AuthFormRequest>();
   const [form, fields] = useForm({
-    id: "register",
+    id: "sign-up",
-    constraint: getZodConstraint(RegisterSchema),
+    constraint: getZodConstraint(SignUpSchema),
     onValidate({ formData }) {
-      return parseWithZod(formData, { schema: RegisterSchema });
+      return parseWithZod(formData, { schema: SignUpSchema })
-    },
-      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">
@@ -79,33 +54,21 @@ export default function Register() {
       </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" }}
@@ -129,17 +92,19 @@ export default function Register() {
                 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}
         />
@@ -148,7 +113,8 @@ export default function Register() {
           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>
@@ -166,7 +132,8 @@ export default function Register() {
             <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>
@@ -176,7 +143,8 @@ export default function Register() {
             <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>
@@ -185,5 +153,5 @@ export default function Register() {
         </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-20240314110748",
+    "@lumeweb/portal-sdk": "^0.0.0-20240306231947",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -39,7 +39,6 @@
     "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",