> ## Documentation Index
> Fetch the complete documentation index at: https://docs.solanamobile.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Caching MWA Authorization

> Customize the authorization caching layer used by MobileWalletProvider to persist wallet connections across app sessions.

<Note>
  This guide is for **advanced users** who want to customize how wallet
  authorization details are cached and persisted. If you're using
  `MobileWalletProvider` with the default settings, authorization caching is
  already handled for you with `AsyncStorage`.
</Note>

## Overview

When a user authorizes your dApp with their wallet via MWA, the session returns an `auth_token` and account details. By caching these details, your app can stay "connected" across app restarts without prompting the user to re-authorize every time.

The [`MobileWalletProvider`](https://github.com/wallet-ui/wallet-ui) from `@wallet-ui/react-native-web3js` handles this automatically with a built-in `AsyncStorage` cache. You can swap in your own cache implementation (e.g for encrypted storage) by passing a custom `cache` prop.

## The `Cache` interface

The `cache` prop on `MobileWalletProvider` accepts any object that implements the `Cache<T>` interface:

```tsx theme={null}
interface Cache<T> {
  clear(): Promise<void>;
  get(): Promise<T | undefined>;
  set(value: T): Promise<void>;
}
```

* **`get()`** — Retrieves the cached authorization on app startup.
* **`set(value)`** — Stores the authorization after the user authorizes.
* **`clear()`** — Removes cached authorization on disconnect/deauthorize.

## Default: `AsyncStorage`

By default, `MobileWalletProvider` uses `@react-native-async-storage/async-storage` to persist authorization data. You don't need to configure anything for this to work:

```tsx theme={null}
import { MobileWalletProvider } from "@wallet-ui/react-native-web3js";

function App() {
  return (
    <MobileWalletProvider
      endpoint="https://api.mainnet-beta.solana.com"
      chain="solana:mainnet"
      identity={{
        name: "My App",
        uri: "https://myapp.com",
        icon: "favicon.ico",
      }}
    >
      {/* cache defaults to AsyncStorage */}
      {children}
    </MobileWalletProvider>
  );
}
```

## Custom cache: `expo-secure-store`

If you want to store authorization details in encrypted storage (e.g for sensitive auth tokens), you can create a custom cache using `expo-secure-store`.

### Install `expo-secure-store`

```shell theme={null}
npx expo install expo-secure-store
```

### Create a Secure Store cache

```tsx theme={null}
import * as SecureStore from "expo-secure-store";
import { Cache } from "@wallet-ui/react-native-web3js";
import { PublicKey, PublicKeyInitData } from "@solana/web3.js";

const STORAGE_KEY = "authorization-cache";

function cacheReviver(key: string, value: unknown) {
  if (key === "publicKey") {
    return new PublicKey(value as PublicKeyInitData);
  }
  return value;
}

export function createSecureStoreCache<T>(): Cache<T> {
  return {
    async get(): Promise<T | undefined> {
      const result = await SecureStore.getItemAsync(STORAGE_KEY);
      if (!result) return undefined;
      try {
        return JSON.parse(result, cacheReviver) as T;
      } catch {
        return undefined;
      }
    },
    async set(value: T): Promise<void> {
      await SecureStore.setItemAsync(STORAGE_KEY, JSON.stringify(value));
    },
    async clear(): Promise<void> {
      await SecureStore.deleteItemAsync(STORAGE_KEY);
    },
  };
}
```

<Note>
  The `cacheReviver` function is needed to properly deserialize `PublicKey`
  objects from the cached JSON string.
</Note>

### Pass it to `MobileWalletProvider`

```tsx theme={null}
import { MobileWalletProvider } from "@wallet-ui/react-native-web3js";
import { createSecureStoreCache } from "./secure-store-cache";

const secureCache = createSecureStoreCache();

function App() {
  return (
    <MobileWalletProvider
      endpoint="https://api.mainnet-beta.solana.com"
      chain="solana:mainnet"
      identity={{
        name: "My App",
        uri: "https://myapp.com",
        icon: "favicon.ico",
      }}
      cache={secureCache}
    >
      {children}
    </MobileWalletProvider>
  );
}
```

***

## Using the bare MWA library

<Accordion title="Manual caching with @solana-mobile/mobile-wallet-adapter-protocol-web3js">
  If you're using the lower-level `@solana-mobile/mobile-wallet-adapter-protocol-web3js` library directly (without `MobileWalletProvider`), you'll need to manage authorization caching yourself.

  ### Check for cached authorization

  When the dApp boots up, check the cache for a prior authorization:

  ```tsx expandable theme={null}
  const App = () => {
    const [currentAccount, setCurrentAccount] = useState<{
      authToken: string;
      pubkey: PublicKey;
    } | null>(null);

    useEffect(() => {
      (async () => {
        const [cachedAuthToken, cachedBase64Address] = await Promise.all([
          AsyncStorage.getItem("authToken"),
          AsyncStorage.getItem("base64Address"),
        ]);
        if (cachedBase64Address && cachedAuthToken) {
          const pubkeyAsByteArray = toByteArray(cachedBase64Address);
          const cachedCurrentAccount = {
            authToken: cachedAuthToken,
            pubkey: new PublicKey(pubkeyAsByteArray),
          };
          setCurrentAccount(cachedCurrentAccount);
        }
      })();
    }, []);

    /* ...*/
  };
  ```

  ### Cache on authorize

  Cache the authorization details when the user completes an `authorize` request:

  ```tsx expandable theme={null}
  const [currentAccount, setCurrentAccount] = useState<{
    authToken: string;
    pubkey: PublicKey;
  } | null>(null);

  const handleConnectPress = useCallback(() => {
    transact(async (wallet) => {
      const { accounts, auth_token } = await wallet.authorize({
        cluster: "devnet",
        identity: {
          name: "My amazing app",
        },
      });
      const firstAccount = accounts[0];
      AsyncStorage.setItem("authToken", auth_token);
      AsyncStorage.setItem("base64Address", firstAccount.address);
      const pubkeyAsByteArray = toByteArray(firstAccount.address);
      const nextCurrentAccount = {
        authToken: auth_token,
        pubkey: new PublicKey(pubkeyAsByteArray),
      };
      setCurrentAccount(nextCurrentAccount);
    });
  }, []);
  ```

  ### Clear cache on deauthorize

  When the user disconnects, invalidate the cache:

  ```tsx theme={null}
  const handleDisconnectPress = useCallback(() => {
    transact(async (wallet) => {
      if (currentAccount == null) {
        throw new Error("There is no current account to deauthorize");
      }
      await wallet.deauthorize({ auth_token: currentAccount.authToken });
      AsyncStorage.clear();
      setCurrentAccount(null);
    });
  }, [currentAccount]);
  ```
</Accordion>