React Native

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:

1import "react-native-get-random-values"; // Shims for the crypto module
2import React from "react";
3import { alchemy, sepolia } from "@account-kit/infra";
4import {
5  AlchemyAccountProvider,
6  createConfig,
7} from "@account-kit/react-native";
8import { QueryClient } from "@tanstack/react-query";
9
10const queryClient = new QueryClient();
11
12const config = createConfig({
13  chain: sepolia,
14  transport: alchemy({
15    apiKey: "YOUR_ALCHEMY_API_KEY",
16  }),
17  signerConnection: {
18    apiKey: "YOUR_ALCHEMY_API_KEY",
19  },
20  sessionConfig: {
21    expirationTimeMs: 1000 * 60 * 60 * 24, // <-- Adjust the session expiration time as needed (currently 24 hours)
22  },
23});
24
25export default function App() {
26  return (
27    <AlchemyAccountProvider config={config} queryClient={queryClient}>
28      {/* The rest of your app here... */}
29    </AlchemyAccountProvider>
30  );
31}

Next Steps

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