Merge pull request #904 from lens-protocol/T-19860/useRefreshToken

feat: adds useRefreshToken experimental hook

.changeset/few-suns-build.md

@@ -0,0 +1,7 @@
+---
+"@lens-protocol/react": patch
+"@lens-protocol/react-native": patch
+"@lens-protocol/react-web": patch
+---
+
+**feat:** adds `useRefreshToken` experimental hook

packages/react/src/authentication/adapters/CredentialsStorage.ts

@@ -67,10 +67,7 @@ export class CredentialsStorage implements IStorage<JwtCredentials>, IAccessToke
       return null;
     }
 
-    const accessToken = this.getAccessToken();
-    const identityToken = this.getIdentityToken();
-
-    return new JwtCredentials(accessToken, identityToken, refreshToken);
+    return new JwtCredentials(this.accessToken, this.identityToken, refreshToken);
   }
 
   async reset(): Promise<void> {
@@ -91,10 +88,6 @@ export class CredentialsStorage implements IStorage<JwtCredentials>, IAccessToke
     return this.accessToken;
   }
 
-  getIdentityToken(): string | null {
-    return this.identityToken;
-  }
-
   async refreshToken(): PromiseResult<void, CredentialsExpiredError> {
     if (this.refreshPromise) {
       return this.refreshPromise;

packages/react/src/experimental/credentials.ts

@@ -0,0 +1,70 @@
+import { useMemo, useSyncExternalStore } from 'react';
+
+import { CredentialsStorage } from '../authentication/adapters/CredentialsStorage';
+import { JwtCredentials } from '../authentication/adapters/JwtCredentials';
+import { useSharedDependencies } from '../shared';
+
+type Callback = () => void;
+
+class ExternalStorageAdapter {
+  private cache: JwtCredentials | null = null;
+
+  constructor(private readonly credentialsStorage: CredentialsStorage) {}
+
+  subscribe = (cb: Callback): Callback => {
+    const subscription = this.credentialsStorage.subscribe((credentials) => {
+      this.cache = credentials;
+      cb();
+    });
+    return () => subscription.unsubscribe();
+  };
+
+  get = () => this.cache;
+}
+
+function useCredentials() {
+  const { credentialsStorage } = useSharedDependencies();
+  const adapter = useMemo(
+    () => new ExternalStorageAdapter(credentialsStorage),
+    [credentialsStorage],
+  );
+  const credentials = useSyncExternalStore(adapter.subscribe, adapter.get);
+
+  return credentials;
+}
+
+/**
+ * Returns the current access token.
+ *
+ * @experimental This API is VERY experimental and might change in the future.
+ * @defaultValue `null` if not authenticated.
+ */
+export function useAccessToken() {
+  const credentials = useCredentials();
+
+  return credentials?.accessToken ?? null;
+}
+
+/**
+ * Returns the current identity token.
+ *
+ * @experimental This API is VERY experimental and might change in the future.
+ * @defaultValue `null` if not authenticated.
+ */
+export function useIdentityToken() {
+  const credentials = useCredentials();
+
+  return credentials?.identityToken ?? null;
+}
+
+/**
+ * Returns the current refresh token.
+ *
+ * @experimental This API is VERY experimental and might change in the future.
+ * @defaultValue `null` if not authenticated.
+ */
+export function useRefreshToken() {
+  const credentials = useCredentials();
+
+  return credentials?.refreshToken ?? null;
+}

packages/react/src/experimental/index.ts

@@ -1,4 +1,3 @@
-export * from './useAccessToken';
+export * from './credentials';
 export * from './useApolloClient';
-export * from './useIdentityToken';
 export * from './useStorage';

packages/react/src/transactions/publications/IUploader.ts

@@ -62,7 +62,7 @@ export interface IUploader {
 }
 
 /**
- *  * The Uploader class let you define your own file upload strategy.
+ * The Uploader class let you define your own file upload strategy.
  *
  * There are two types of uploaders you can define:
  * - Stateless uploader: This uploader handles each file individually. It's useful when you're uploading files through an API in your backend.