Setting up the Alchemy Accounts Provider

This guide assumes you have already followed the Setup Guide and have set up the Alchemy Account Provider using this guide. Please refer to the guides above for more information on how to properly setup your project.

For a complete example of how we can setup a project and use the various available authentication methods, please refer to our quickstart example.

Once you have followed the Signer Setup Guide, set up and configure the Alchemy Accounts Provider in your project.

You can do this by wrapping the top level component (e.g. _layout.tsx in Expo or App.tsx in Bare React Native) in your app with the AlchemyAccountsProvider component from the @account-kit/react-native package.

Here’s an example of how to do this:

import "react-native-get-random-values"; // Shims for the crypto module
import React from "react";
import { function alchemy(config: AlchemyTransportConfig): AlchemyTransportCreates an Alchemy transport with the specified configuration options. When sending all traffic to Alchemy, you must pass in one of rpcUrl, apiKey, or jwt. If you want to send Bundler and Paymaster traffic to Alchemy and Node traffic to a different RPC, you must pass in alchemyConnection and nodeRpcUrl.
alchemy, const sepolia: Chain
sepolia } from "@account-kit/infra";
import {
  const AlchemyAccountProvider: (props: React.PropsWithChildren<AlchemyAccountsProviderProps>) => JSX.ElementProvider for Alchemy accounts.
AlchemyAccountProvider,
  const createConfig: (params: BaseCreateConfigProps) => AlchemyAccountsConfigCreates an AlchemyAccountsConfig by using the provided parameters to configure the core settings, including the required transport. It includes a signer creation function internally.
createConfig,
} from "@account-kit/react-native";
import { class QueryClient
QueryClient } from "@tanstack/react-query";

const const queryClient: QueryClient
queryClient = new new QueryClient(config?: QueryClientConfig): QueryClient
QueryClient();

const const config: AlchemyAccountsConfig
config = function createConfig(params: BaseCreateConfigProps): AlchemyAccountsConfigCreates an AlchemyAccountsConfig by using the provided parameters to configure the core settings, including the required transport. It includes a signer creation function internally.
createConfig({
  chain: Chain
chain: const sepolia: Chain
sepolia,
  transport: AlchemyTransport
transport: function alchemy(config: AlchemyTransportConfig): AlchemyTransportCreates an Alchemy transport with the specified configuration options. When sending all traffic to Alchemy, you must pass in one of rpcUrl, apiKey, or jwt. If you want to send Bundler and Paymaster traffic to Alchemy and Node traffic to a different RPC, you must pass in alchemyConnection and nodeRpcUrl.
alchemy({
    apiKey: string
apiKey: "YOUR_ALCHEMY_API_KEY",
  }),
  signerConnection: {
    apiKey: string;
}
signerConnection: {
    apiKey: string
apiKey: "YOUR_ALCHEMY_API_KEY",
  },
  sessionConfig?: ({
    storage?: Storage | "localStorage" | "sessionStorage" | undefined;
    sessionKey?: string | undefined;
    expirationTimeMs?: number | undefined;
} & {
    domain?: string;
}) | undefined
sessionConfig: {
    expirationTimeMs?: number | undefined
expirationTimeMs: 1000 * 60 * 60 * 24, // <-- Adjust the session expiration time as needed (currently 24 hours)
  },
});

export default function function App(): JSX.Element
App() {
  return (
    <const AlchemyAccountProvider: (props: React.PropsWithChildren<AlchemyAccountsProviderProps>) => JSX.ElementProvider for Alchemy accounts.
AlchemyAccountProvider config: AlchemyAccountsConfig
config={const config: AlchemyAccountsConfig
config} queryClient: QueryClient
queryClient={const queryClient: QueryClient
queryClient}>
      {/* The rest of your app here... */}
    </const AlchemyAccountProvider: (props: React.PropsWithChildren<AlchemyAccountsProviderProps>) => JSX.ElementProvider for Alchemy accounts.
AlchemyAccountProvider>
  );
}

import "react-native-get-random-values"; // Shims for the crypto module
import React from "react";
import { function alchemy(config: AlchemyTransportConfig): AlchemyTransportCreates an Alchemy transport with the specified configuration options. When sending all traffic to Alchemy, you must pass in one of rpcUrl, apiKey, or jwt. If you want to send Bundler and Paymaster traffic to Alchemy and Node traffic to a different RPC, you must pass in alchemyConnection and nodeRpcUrl.
alchemy, const sepolia: Chain
sepolia } from "@account-kit/infra";
import {
  const AlchemyAccountProvider: (props: React.PropsWithChildren<AlchemyAccountsProviderProps>) => JSX.ElementProvider for Alchemy accounts.
AlchemyAccountProvider,
  const createConfig: (params: BaseCreateConfigProps) => AlchemyAccountsConfigCreates an AlchemyAccountsConfig by using the provided parameters to configure the core settings, including the required transport. It includes a signer creation function internally.
createConfig,
} from "@account-kit/react-native";
import { class QueryClient
QueryClient } from "@tanstack/react-query";

const const queryClient: QueryClient
queryClient = new new QueryClient(config?: QueryClientConfig): QueryClient
QueryClient();

const const config: AlchemyAccountsConfig
config = function createConfig(params: BaseCreateConfigProps): AlchemyAccountsConfigCreates an AlchemyAccountsConfig by using the provided parameters to configure the core settings, including the required transport. It includes a signer creation function internally.
createConfig({
  chain: Chain
chain: const sepolia: Chain
sepolia,
  transport: AlchemyTransport
transport: function alchemy(config: AlchemyTransportConfig): AlchemyTransportCreates an Alchemy transport with the specified configuration options. When sending all traffic to Alchemy, you must pass in one of rpcUrl, apiKey, or jwt. If you want to send Bundler and Paymaster traffic to Alchemy and Node traffic to a different RPC, you must pass in alchemyConnection and nodeRpcUrl.
alchemy({
    apiKey: string
apiKey: "YOUR_ALCHEMY_API_KEY",
  }),
  signerConnection: {
    apiKey: string;
}
signerConnection: {
    apiKey: string
apiKey: "YOUR_ALCHEMY_API_KEY",
  },
  sessionConfig?: ({
    storage?: Storage | "localStorage" | "sessionStorage" | undefined;
    sessionKey?: string | undefined;
    expirationTimeMs?: number | undefined;
} & {
    domain?: string;
}) | undefined
sessionConfig: {
    expirationTimeMs?: number | undefined
expirationTimeMs: 1000 * 60 * 60 * 24, // <-- Adjust the session expiration time as needed (currently 24 hours)
  },
});

export default function function App(): JSX.Element
App() {
  return (
    <const AlchemyAccountProvider: (props: React.PropsWithChildren<AlchemyAccountsProviderProps>) => JSX.ElementProvider for Alchemy accounts.
AlchemyAccountProvider config: AlchemyAccountsConfig
config={const config: AlchemyAccountsConfig
config} queryClient: QueryClient
queryClient={const queryClient: QueryClient
queryClient}>
      {/* The rest of your app here... */}
    </const AlchemyAccountProvider: (props: React.PropsWithChildren<AlchemyAccountsProviderProps>) => JSX.ElementProvider for Alchemy accounts.
AlchemyAccountProvider>
  );
}

Next Steps

Now that you have set up the Alchemy Accounts Provider, you can follow the Authentication Guides to learn how to authenticate users.