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:

1. Create an app in the dashboard and copy the API Key.

2. 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 { alchemy, sepolia } from "@account-kit/infra";
import {
  AlchemyAccountProvider,
  createConfig,
} from "@account-kit/react-native";
import { QueryClient } from "@tanstack/react-query";
 
const queryClient = new QueryClient();
 
const config = createConfig({
  chain: sepolia,
  transport: alchemy({
    apiKey: "YOUR_ALCHEMY_API_KEY",
  }),
  signerConnection: {
    apiKey: "YOUR_ALCHEMY_API_KEY",
  },
  sessionConfig: {
    expirationTimeMs: 1000 * 60 * 60 * 24, // <-- Adjust the session expiration time as needed (currently 24 hours)
  },
});
 
export default function App() {
  return (
    <AlchemyAccountProvider config={config} queryClient={queryClient}>
      {/* The rest of your app here... */}
    </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: