Setup authentication to smart wallets on React Native

In this step you will get your authentication working so users can login with their smart wallets.

Setup your application

First, configure your application and your API Key:

Create an app in the dashboard and copy the API Key.
Create a configuration in the Smart Wallets dashboard to enable login methods.

Hold onto your API Key for the next step.

Setup the Alchemy Accounts Provider

Now 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>
  );
}

Choose your authentication

Now that you have set up the Alchemy Accounts Provider, you can setup your authentication!

You can choose from many authentication guides with react native instructions, like this one on Email One-Time Passwords.

Next Steps

Once you have authentication working, you can explore additional features:

Send User Operations

Learn how to perform transactions by sending user operations with your smart wallet.

Add Gas Sponsorship

Enable gasless transactions by setting up gas sponsorship for your users.