app/components/general-layout.tsx

@@ -159,10 +159,7 @@ const UploadFileForm = () => {
     state,
     removeFile,
     cancelAll,
-  } = useUppy({
-    uploader: "tus",
-    endpoint: import.meta.env.VITE_PUBLIC_TUS_ENDPOINT,
-  });
+  } = useUppy();
 
   console.log({ state, files: getFiles() });
 

app/components/lib/uppy.ts

@@ -8,7 +8,7 @@ import DropTarget, {type DropTargetOptions} from "./uppy-dropzone"
 import {useSdk} from "~/components/lib/sdk-context.js";
 import UppyFileUpload from "~/components/lib/uppy-file-upload.js";
 import {PROTOCOL_S5, Sdk} from "@lumeweb/portal-sdk";
-import {S5Client} from "@lumeweb/s5-js";
+import {S5Client, HashProgressEvent} from "@lumeweb/s5-js";
 
 const LISTENING_EVENTS = [
   "upload",
@@ -19,11 +19,7 @@ const LISTENING_EVENTS = [
   "files-added"
 ] as const
 
-export function useUppy({
-  endpoint
-}: {
-  endpoint: string
-}) {
+export function useUppy() {
     const sdk = useSdk()
 
     const [uploadLimit, setUploadLimit] = useState<number>(0)
@@ -98,8 +94,24 @@ export function useUppy({
             const file = uppyInstance.current?.getFile(fileID) as UppyFile
             // @ts-ignore
             if (file.uploader === "tus") {
+                const hashProgressCb = (event: HashProgressEvent) => {
+                    uppyInstance.current?.emit("preprocess-progress", file, {
+                        uploadStarted: false,
+                        bytesUploaded: 0,
+                        preprocess: {
+                            mode: "determinate",
+                            message: "Hashing file...",
+                            value: Math.round((event.total / event.total) * 100)
+                        }
+                    })
+                }
+                const options = await sdk.protocols!().get<S5Client>(PROTOCOL_S5).getSdk().getTusOptions(file.data as File,  {}, {onHashProgress: hashProgressCb})
                 uppyInstance.current?.setFileState(fileID, {
-                    tus: await sdk.protocols!().get<S5Client>(PROTOCOL_S5).getSdk().getTusOptions(file.data as File)
+                    tus: options,
+                    meta: {
+                        ...options.metadata,
+                        ...file.meta,
+                    }
                 })
             }
         }
@@ -145,7 +157,7 @@ export function useUppy({
           })
 
           if (useTus) {
-              uppy.use(Tus, { endpoint: endpoint, limit: 6 })
+              uppy.use(Tus, { limit: 6, parallelUploads: 10 })
               uppy.addPreProcessor(tusPreprocessor)
           }
 
@@ -195,7 +207,7 @@ export function useUppy({
       })
     }
     setState("idle")
-  }, [targetRef, endpoint, uploadLimit])
+  }, [targetRef, uploadLimit])
 
   useEffect(() => {
     return () => {

app/data/account-provider.ts

@@ -0,0 +1,53 @@
+import type {DataProvider, UpdateParams, UpdateResponse, HttpError} from "@refinedev/core";
+import {SdkProvider} from "~/data/sdk-provider.js";
+
+type AccountParams = {
+    email?: string;
+    password?: string;
+}
+
+type AccountData = AccountParams;
+
+export const accountProvider: SdkProvider = {
+    getList: () => {
+        throw Error("Not Implemented")
+    },
+    getOne: () => {
+        throw Error("Not Implemented")
+    },
+    // @ts-ignore
+    async update<TVariables extends AccountParams = AccountParams>(
+        params: UpdateParams<AccountParams>,
+    ): Promise<UpdateResponse<AccountData>> {
+        if (params.variables.email && params.variables.password) {
+            const ret = await accountProvider.sdk?.account().updateEmail(params.variables.email, params.variables.password);
+
+            if (ret) {
+                if (ret instanceof Error) {
+                    return Promise.reject(ret)
+                }
+            } else {
+                return Promise.reject();
+            }
+
+            return {
+                data:
+                    {
+                        email: params.variables.email,
+                    },
+            };
+        }
+
+        // Return an empty response if params.variables is undefined
+        return {
+            data: {} as AccountParams,
+        };
+    },
+    create: () => {
+        throw Error("Not Implemented")
+    },
+    deleteOne: () => {
+        throw Error("Not Implemented")
+    },
+    getApiUrl: () => "",
+}

app/data/auth-provider.ts

@@ -1,4 +1,4 @@
-import type {AuthProvider} from "@refinedev/core"
+import type {AuthProvider, UpdatePasswordFormTypes} from "@refinedev/core"
 
 import type {
     AuthActionResponse,
@@ -8,7 +8,6 @@ import type {
     // @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 = {
@@ -32,134 +31,116 @@ export type Identity = {
     email: string;
 }
 
-export class PortalAuthProvider implements RequiredAuthProvider {
-    constructor(apiUrl: string) {
-        this._sdk = Sdk.create(apiUrl);
+export interface UpdatePasswordFormRequest extends UpdatePasswordFormTypes{
+    currentPassword: string;
+}
 
-        const methods: Array<keyof AuthProvider> = [
-            'login',
-            'logout',
-            'check',
-            'onError',
-            'register',
-            'forgotPassword',
-            'updatePassword',
-            'getPermissions',
-            'getIdentity',
-        ];
+export const createPortalAuthProvider = (sdk: Sdk): AuthProvider => {
+    const maybeSetupAuth = (): void => {
+        const jwt = sdk.account().jwtToken;
+        if (jwt) {
+            sdk.setAuthToken(jwt);
+        }
+    };
 
-        methods.forEach((method) => {
-            this[method] = this[method]?.bind(this) as any;
-        });
-    }
+    return {
+        async login(params: AuthFormRequest): Promise<AuthActionResponse> {
+            const ret = await sdk.account().login({
+                email: params.email,
+                password: params.password,
+            });
 
-    private _sdk: Sdk;
+            let redirectTo: string | undefined;
 
-    get sdk(): Sdk {
-        return this._sdk;
-    }
-
-    public static create(apiUrl: string): AuthProvider {
-        return new PortalAuthProvider(apiUrl);
-    }
-
-    async login(params: AuthFormRequest): Promise<AuthActionResponse> {
-        const ret = await this._sdk.account().login({
-            email: params.email,
-            password: params.password,
-        })
-
-        let redirectTo: string | undefined;
-
-        if (ret) {
-            redirectTo = params.redirectTo;
-            if (!redirectTo) {
-                redirectTo = ret ? "/dashboard" : "/login";
+            if (ret) {
+                redirectTo = params.redirectTo;
+                if (!redirectTo) {
+                    redirectTo = ret ? "/dashboard" : "/login";
+                }
+                sdk.setAuthToken(sdk.account().jwtToken);
             }
-            this._sdk.setAuthToken(this._sdk.account().jwtToken);
-        }
 
-        return {
-            success: ret,
-            redirectTo,
-        };
-    }
+            return {
+                success: ret,
+                redirectTo,
+            };
+        },
 
-    async logout(params: any): Promise<AuthActionResponse> {
-        let ret = await this._sdk.account().logout();
-        return {success: ret, redirectTo: "/login"};
-    }
+        async logout(params: any): Promise<AuthActionResponse> {
+            let ret = await sdk.account().logout();
+            return {success: ret, redirectTo: "/login"};
+        },
 
-    async check(params?: any): Promise<CheckResponse> {
-        this.maybeSetupAuth();
+        async check(params?: any): Promise<CheckResponse> {
+            const ret = await sdk.account().ping();
 
-        const ret = await this._sdk.account().ping();
+            if (ret) {
+                maybeSetupAuth();
+            }
 
-        return {authenticated: ret, redirectTo: ret ? undefined : "/login"};
-    }
+            return {authenticated: ret, redirectTo: ret ? undefined : "/login"};
+        },
 
-    async onError(error: any): Promise<OnErrorResponse> {
-        const cookies = new Cookies();
-        return {logout: true};
-    }
+        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 register(params: RegisterFormRequest): Promise<AuthActionResponse> {
+            const ret = await 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 forgotPassword(params: any): Promise<AuthActionResponse> {
+            return {success: true};
+        },
 
-    async updatePassword(params: any): Promise<AuthActionResponse> {
-        return {success: true};
-    }
+        async updatePassword(params: UpdatePasswordFormRequest): Promise<AuthActionResponse> {
+            maybeSetupAuth();
+            const ret = await sdk.account().updatePassword(params.currentPassword, params.password as string);
 
-    async getPermissions(params?: Record<string, any>): Promise<AuthActionResponse> {
-        return {success: true};
-    }
+            if (ret) {
+                if (ret instanceof Error) {
+                    return {
+                        success: false,
+                        error: ret
+                    }
+                }
 
-    async getIdentity(params?: Identity): Promise<IdentityResponse> {
-        this.maybeSetupAuth();
-        const ret = await this._sdk.account().info();
+                return {
+                    success: true
+                }
+            } else {
+                return {
+                    success: false
+                }
+            }
+        },
 
-        if (!ret) {
-            return {identity: null};
-        }
+        async getPermissions(params?: Record<string, any>): Promise<AuthActionResponse> {
+            return {success: true};
+        },
 
-        const acct = ret as AccountInfoResponse;
+        async getIdentity(params?: Identity): Promise<IdentityResponse> {
+            maybeSetupAuth();
+            const ret = await sdk.account().info();
 
-        return {
-            id: acct.id,
-            firstName: acct.first_name,
-            lastName: acct.last_name,
-            email: acct.email,
-        };
-    }
+            if (!ret) {
+                return {identity: null};
+            }
 
-    maybeSetupAuth(): void {
-        const cookies = new Cookies();
-        const jwtCookie = cookies.get('auth_token');
-        if (jwtCookie) {
-            this._sdk.setAuthToken(jwtCookie);
-        }
-    }
-}
+            const acct = ret as AccountInfoResponse;
 
-export 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'];
-}
+            return {
+                id: acct.id,
+                firstName: acct.first_name,
+                lastName: acct.last_name,
+                email: acct.email,
+            };
+        },
+    };
+};

app/data/file-provider.ts

@@ -1,6 +1,7 @@
 import type { DataProvider } from "@refinedev/core";
+import {SdkProvider} from "~/data/sdk-provider.js";
 
-export const defaultProvider: DataProvider = {
+export const fileProvider: SdkProvider = {
   getList: () => { throw Error("Not Implemented") },
   getOne: () => { throw Error("Not Implemented") },
   update: () => { throw Error("Not Implemented") },

app/data/providers.ts

@@ -0,0 +1,31 @@
+import type {AuthProvider, DataProvider} from "@refinedev/core";
+import {fileProvider} from "~/data/file-provider.js";
+import {Sdk} from "@lumeweb/portal-sdk";
+import {accountProvider} from "~/data/account-provider.js";
+import type {SdkProvider} from "~/data/sdk-provider.js";
+import {createPortalAuthProvider} from "~/data/auth-provider.js";
+
+interface DataProviders {
+    default: SdkProvider;
+    auth: AuthProvider;
+
+    [key: string]: SdkProvider | AuthProvider;
+}
+
+let providers: DataProviders;
+
+export function getProviders(sdk: Sdk) {
+    if (providers) {
+        return providers;
+    }
+
+    accountProvider.sdk = sdk;
+    fileProvider.sdk = sdk;
+    providers = {
+        default: accountProvider,
+        auth: createPortalAuthProvider(sdk),
+        files: fileProvider,
+    };
+
+    return providers;
+}

app/data/resources.ts

@@ -0,0 +1,18 @@
+import type {ResourceProps} from "@refinedev/core";
+
+const resources: ResourceProps[] = [
+    {
+        name: 'account',
+        meta: {
+            dataProviderName: 'default',
+        }
+    },
+    {
+        name: 'file',
+        meta: {
+            dataProviderName: 'files',
+        }
+    }
+];
+
+export default resources;

app/data/sdk-provider.ts

@@ -0,0 +1,6 @@
+import {DataProvider} from "@refinedev/core";
+import {Sdk} from "@lumeweb/portal-sdk";
+
+export interface SdkProvider extends DataProvider {
+    sdk?: Sdk;
+}

app/root.tsx

@@ -1,24 +1,18 @@
-import {
-    Links,
-    Meta,
-    Outlet,
-    Scripts,
-    ScrollRestoration,
-} from "@remix-run/react";
+import {Links, Meta, Outlet, Scripts, ScrollRestoration,} from "@remix-run/react";
 
 import stylesheet from "./tailwind.css?url";
-import type { LinksFunction } from "@remix-run/node";
+import type {LinksFunction} from "@remix-run/node";
 
 // Supports weights 200-800
 import '@fontsource-variable/manrope';
 import {Refine} from "@refinedev/core";
 import routerProvider from "@refinedev/remix-router";
-import { defaultProvider } from "~/data/file-provider";
-import {PortalAuthProvider} from "~/data/auth-provider";
 import { notificationProvider } from "~/data/notification-provider";
 import {SdkContextProvider} from "~/components/lib/sdk-context";
 import { Toaster } from "~/components/ui/toaster";
-
+import {getProviders} from "~/data/providers.js";
+import {Sdk} from "@lumeweb/portal-sdk";
+import resources from "~/data/resources.js";
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
@@ -44,19 +38,18 @@ export function Layout({children}: { children: React.ReactNode }) {
 }
 
 export default function App() {
-    const auth = PortalAuthProvider.create("https://alpha.pinner.xyz")
+    const sdk = Sdk.create(import.meta.env.VITE_PORTAL_URL)
+    const providers = getProviders(sdk);
     return (
         <Refine
-            authProvider={auth}
+            authProvider={providers.auth}
             routerProvider={routerProvider}
-            dataProvider={defaultProvider}
             notificationProvider={notificationProvider}
-            resources={[
-                { name: 'files' },
-                { name: 'users' }
-            ]}
+            dataProvider={providers.default}
+            resources={resources}
+            options={{disableTelemetry: true}}
         >
-            <SdkContextProvider sdk={(auth as PortalAuthProvider).sdk}>
+            <SdkContextProvider sdk={sdk}>
                 <Outlet/>
             </SdkContextProvider>
         </Refine>

app/routes/account.tsx

@@ -3,10 +3,11 @@ import { getZodConstraint, parseWithZod } from "@conform-to/zod";
 import { DialogClose } from "@radix-ui/react-dialog";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import {
-  BaseKey,
-  useGetIdentity,
-  useUpdate,
-  useUpdatePassword,
+    Authenticated,
+    BaseKey,
+    useGetIdentity,
+    useUpdate,
+    useUpdatePassword,
 } from "@refinedev/core";
 import { useMemo, useState } from "react";
 import { z } from "zod";
@@ -40,6 +41,7 @@ import { Input } from "~/components/ui/input";
 import { UsageCard } from "~/components/usage-card";
 
 import QRImg from "~/images/QR.png";
+import {UpdatePasswordFormRequest} from "~/data/auth-provider.js";
 
 export default function MyAccount() {
   const { data: identity } = useGetIdentity<{ email: string }>();
@@ -52,7 +54,8 @@ export default function MyAccount() {
   });
 
   return (
-    <GeneralLayout>
+      <Authenticated key="account" v3LegacyAuthProviderCompatible>
+        <GeneralLayout>
       <h1 className="text-lg font-bold mb-4">My Account</h1>
       <Dialog
         onOpenChange={(open) => {
@@ -211,6 +214,7 @@ export default function MyAccount() {
         </DialogContent>
       </Dialog>
     </GeneralLayout>
+      </Authenticated>
   );
 }
 
@@ -247,10 +251,11 @@ const ChangeEmailForm = ({ currentValue }: { currentValue: string }) => {
       const data = Object.fromEntries(new FormData(e.currentTarget).entries());
       console.log(identity);
       updateEmail({
-        resource: "users",
-        id: identity?.id || "",
+        resource: "account",
+        id:  "",
         values: {
           email: data.email.toString(),
+          password: data.password.toString(),
         },
       });
     },
@@ -292,7 +297,7 @@ const ChangeEmailForm = ({ currentValue }: { currentValue: string }) => {
 
 const ChangePasswordSchema = z
   .object({
-    currentPassword: z.string().email(),
+    currentPassword: z.string(),
     newPassword: z.string(),
     retypePassword: z.string(),
   })
@@ -311,7 +316,7 @@ const ChangePasswordForm = () => {
   const { mutate: updatePassword } = useUpdatePassword<{ password: string }>();
   const [form, fields] = useForm({
     id: "login",
-    constraint: getZodConstraint(ChangeEmailSchema),
+    constraint: getZodConstraint(ChangePasswordSchema),
     onValidate({ formData }) {
       return parseWithZod(formData, { schema: ChangePasswordSchema });
     },
@@ -322,7 +327,7 @@ const ChangePasswordForm = () => {
       const data = Object.fromEntries(new FormData(e.currentTarget).entries());
 
       updatePassword({
-        password: data.newPassword.toString(),
+          password: data.newPassword.toString(),
       });
     },
   });
@@ -408,10 +413,7 @@ const ChangeAvatarForm = () => {
     state,
     removeFile,
     cancelAll,
-  } = useUppy({
-    uploader: "tus",
-    endpoint: import.meta.env.VITE_PUBLIC_TUS_ENDPOINT,
-  });
+  } = useUppy();
 
   console.log({ state, files: getFiles() });
 

package.json

@@ -8,13 +8,15 @@
     "dev": "remix vite:dev",
     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
     "preview": "vite preview",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "patch-package": "patch-package",
+    "postinstall": "patch-package"
   },
   "dependencies": {
     "@conform-to/react": "^1.0.2",
     "@conform-to/zod": "^1.0.2",
     "@fontsource-variable/manrope": "^5.0.19",
-    "@lumeweb/portal-sdk": "0.0.0-20240318183202",
+    "@lumeweb/portal-sdk": "0.0.0-20240319140708",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -44,7 +46,6 @@
     "react-dom": "^18.2.0",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
-    "universal-cookie": "^7.1.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {

vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+    readonly VITE_PORTAL_API_URL: string
+}
+
+interface ImportMeta {
+    readonly env: ImportMetaEnv
+}