App Integration | Alchemy Docs

Initializing Alchemy Provider

Wrap your application with the Alchemy Provider to enable embedded wallet functionality.

1. Create a file: `providers.tsx`

app/providers.tsx

1 "use client";
2 import { config, queryClient } from "@/config";
3 import {
4   AlchemyAccountProvider,
5   AlchemyAccountsProviderProps,
6 } from "@account-kit/react";
7 import { QueryClientProvider } from "@tanstack/react-query";
8 import { PropsWithChildren } from "react";
9 
10 export const Providers = (
11   props: PropsWithChildren<{
12     initialState?: AlchemyAccountsProviderProps["initialState"];
13   }>,
14 ) => {
15   return (
16     <QueryClientProvider client={queryClient}>
17       <AlchemyAccountProvider
18         config={config}
19         queryClient={queryClient}
20         initialState={props.initialState}
21       >
22         {props.children}
23       </AlchemyAccountProvider>
24     </QueryClientProvider>
25   );
26 };

2. Update your `layout.tsx`

app/layout.tsx

1 import { config } from "@/config";
2 import { cookieToInitialState } from "@account-kit/core";
3 import type { Metadata } from "next";
4 import { Inter } from "next/font/google";
5 import { headers } from "next/headers";
6 import "./globals.css";
7 import { Providers } from "./providers";
8 
9 const inter = Inter({ subsets: ["latin"] });
10 
11 export const metadata: Metadata = {
12   title: "My App with Embedded Wallets",
13   description: "My app with Alchemy Smart Wallets integration",
14 };
15 
16 export default async function RootLayout({
17   children,
18 }: Readonly<{
19   children: React.ReactNode;
20 }>) {
21   const headersList = await headers();
22   const initialState = cookieToInitialState(
23     config,
24     headersList.get("cookie") ?? undefined,
25   );
26 
27   return (
28     <html lang="en">
29       <body className={inter.className}>
30         <Providers initialState={initialState}>{children}</Providers>
31       </body>
32     </html>
33   );
34 }

3. Add authentication to your app

Now you can use the Alchemy React components to add wallet authentication anywhere in your app.

Example page with login functionality

app/page.tsx

1 "use client";
2 import {
3   useAuthModal,
4   useLogout,
5   useSignerStatus,
6   useUser,
7 } from "@account-kit/react";
8 
9 export default function Home() {
10   const user = useUser();
11   const { openAuthModal } = useAuthModal();
12   const signerStatus = useSignerStatus();
13   const { logout } = useLogout();
14 
15   return (
16     <main className="flex min-h-screen flex-col items-center p-24 gap-4 justify-center text-center">
17       {signerStatus.isInitializing ? (
18         <>Loading...</>
19       ) : user ? (
20         <div className="flex flex-col gap-2 p-2">
21           <p className="text-xl font-bold">Success!</p>
22           You're logged in as {user.email ?? "anon"}.
23           <button
24             className="akui-btn akui-btn-primary mt-6"
25             onClick={() => logout()}
26           >
27             Log out
28           </button>
29         </div>
30       ) : (
31         <button className="akui-btn akui-btn-primary" onClick={openAuthModal}>
32           Login
33         </button>
34       )}
35     </main>
36   );
37 }