A Web3 authentication frontend built with TanStack Start, React, and RainbowKit. This application connects to a custom SIWE (Sign-In With Ethereum) backend for secure wallet-based authentication.
This frontend connects to: Custom-RainbowKit-SIWE Backend
Frontend (TanStack Start + React)
↓
RainbowKit ConnectButton
↓
Authentication Adapter (src/lib/Adapter.tsx)
↓ HTTP Requests (axios)
Backend (Express.js on localhost:5000)
↓
SIWE (Sign-In With Ethereum) endpoints
- RainbowKit connects the user's wallet (MetaMask, Reown, etc.)
- Frontend requests a unique nonce from the backend
- Backend generates and returns a nonce (prevents replay attacks)
- Creates a standardized SIWE message with user's address, nonce, and chain ID
- This message will be signed by the user's wallet
- User approves the signature request in their wallet
- Wallet signs the message with their private key
- Frontend sends the signed message to backend
- Backend cryptographically verifies the signature matches the address
- If valid, backend creates a session (using cookies)
- When user disconnects, frontend notifies backend
- Backend destroys the session
- ✅ Cryptographically secure - Uses wallet signatures
- ✅ No passwords - User's wallet is their identity
- ✅ Session management - Backend tracks authenticated users
- ✅ Web3-native - Standard SIWE protocol (EIP-4361)
- ✅ Beautiful UI - RainbowKit's polished wallet connection interface
Before running this application, you need:
- Reown Project ID: Get one from Reown
- Backend Server: Clone and run the backend repository
Create a .env.local file in the project root:
VITE_WALLET_CONNECT_PROJECT_ID=your_walletconnect_project_id_hereImportant: In Vite/TanStack Start, environment variables must be prefixed with VITE_ to be accessible on the client side.
git clone https://github.com/aerilabs/custom-rainbowkit-backend.git
cd custom-rainbowkit-backend
pnpm install
pnpm dev # Runs on localhost:5000# In this project directory
pnpm install
pnpm devThe application will be available at http://localhost:3000.
src/
├── components/
│ └── Header.tsx # Navigation header with sidebar
├── lib/
│ ├── Adapter.tsx # SIWE authentication adapter
│ └── Providers.tsx # Wagmi, QueryClient, RainbowKit providers
├── routes/
│ ├── __root.tsx # Root layout with providers
│ └── index.tsx # Home page with ConnectButton
└── styles.css # Global styles
-
src/lib/Adapter.tsx: Implements the SIWE authentication flow- Connects to backend endpoints (
/siwe/nonce,/siwe/verify,/siwe/logout) - Configured with
axiosbase URL:http://localhost:5000 - Enables credentials for session cookie management
- Connects to backend endpoints (
-
src/lib/Providers.tsx: Sets up Web3 providersWagmiProvider: Ethereum connection managementQueryClientProvider: TanStack Query for data fetchingRainbowKitProvider: Wallet connection UI
-
src/routes/__root.tsx: Root layout- Wraps entire app with providers
- Includes Header component and Outlet for child routes
To build this application for production:
pnpm buildThis project uses Vitest for testing. You can run the tests with:
pnpm testThis project uses Tailwind CSS for styling.
This project uses eslint and prettier for linting and formatting. Eslint is configured using tanstack/eslint-config. The following scripts are available:
pnpm lint
pnpm format
pnpm checkThis project uses TanStack Router. The initial setup is a file based router. Which means that the routes are managed as files in src/routes.
To add a new route to your application just add another a new file in the ./src/routes directory.
TanStack will automatically generate the content of the route file for you.
Now that you have two routes you can use a Link component to navigate between them.
To use SPA (Single Page Application) navigation you will need to import the Link component from @tanstack/react-router.
import { Link } from '@tanstack/react-router'Then anywhere in your JSX you can use it like so:
<Link to="/about">About</Link>This will create a link that will navigate to the /about route.
More information on the Link component can be found in the Link documentation.
In the File Based Routing setup the layout is located in src/routes/__root.tsx. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the <Outlet /> component.
Here is an example layout that includes a header:
import { Outlet, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
import { Link } from '@tanstack/react-router'
export const Route = createRootRoute({
component: () => (
<>
<header>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
</header>
<Outlet />
<TanStackRouterDevtools />
</>
),
})The <TanStackRouterDevtools /> component is not required so you can remove it if you don't want it in your layout.
More information on layouts can be found in the Layouts documentation.
There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the loader functionality built into TanStack Router to load the data for a route before it's rendered.
For example:
const peopleRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/people',
loader: async () => {
const response = await fetch('https://swapi.dev/api/people')
return response.json() as Promise<{
results: {
name: string
}[]
}>
},
component: () => {
const data = peopleRoute.useLoaderData()
return (
<ul>
{data.results.map((person) => (
<li key={person.name}>{person.name}</li>
))}
</ul>
)
},
})Loaders simplify your data fetching logic dramatically. Check out more information in the Loader documentation.
React-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.
First add your dependencies:
pnpm add @tanstack/react-query @tanstack/react-query-devtoolsNext we'll need to create a query client and provider. We recommend putting those in main.tsx.
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
// ...
const queryClient = new QueryClient()
// ...
if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement)
root.render(
<QueryClientProvider client={queryClient}>
<RouterProvider router={router} />
</QueryClientProvider>,
)
}You can also add TanStack Query Devtools to the root route (optional).
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
const rootRoute = createRootRoute({
component: () => (
<>
<Outlet />
<ReactQueryDevtools buttonPosition="top-right" />
<TanStackRouterDevtools />
</>
),
})Now you can use useQuery to fetch your data.
import { useQuery } from '@tanstack/react-query'
import './App.css'
function App() {
const { data } = useQuery({
queryKey: ['people'],
queryFn: () =>
fetch('https://swapi.dev/api/people')
.then((res) => res.json())
.then((data) => data.results as { name: string }[]),
initialData: [],
})
return (
<div>
<ul>
{data.map((person) => (
<li key={person.name}>{person.name}</li>
))}
</ul>
</div>
)
}
export default AppYou can find out everything you need to know on how to use React-Query in the React-Query documentation.
Another common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project.
First you need to add TanStack Store as a dependency:
pnpm add @tanstack/storeNow let's create a simple counter in the src/App.tsx file as a demonstration.
import { useStore } from '@tanstack/react-store'
import { Store } from '@tanstack/store'
import './App.css'
const countStore = new Store(0)
function App() {
const count = useStore(countStore)
return (
<div>
<button onClick={() => countStore.setState((n) => n + 1)}>
Increment - {count}
</button>
</div>
)
}
export default AppOne of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.
Let's check this out by doubling the count using derived state.
import { useStore } from '@tanstack/react-store'
import { Store, Derived } from '@tanstack/store'
import './App.css'
const countStore = new Store(0)
const doubledStore = new Derived({
fn: () => countStore.state * 2,
deps: [countStore],
})
doubledStore.mount()
function App() {
const count = useStore(countStore)
const doubledCount = useStore(doubledStore)
return (
<div>
<button onClick={() => countStore.setState((n) => n + 1)}>
Increment - {count}
</button>
<div>Doubled - {doubledCount}</div>
</div>
)
}
export default AppWe use the Derived class to create a new store that is derived from another store. The Derived class has a mount method that will start the derived store updating.
Once we've created the derived store we can use it in the App component just like we would any other store using the useStore hook.
You can find out everything you need to know on how to use TanStack Store in the TanStack Store documentation.
Files prefixed with demo can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
The Wagmi config in src/lib/Providers.tsx includes:
- Chains: Mainnet, Sepolia, Polygon, Optimism, Arbitrum, Base
- SSR: Enabled for server-side rendering support
- Reown Project ID: Required for Reown
The authentication adapter uses axios with:
axios.defaults.baseURL = 'http://localhost:5000'
axios.defaults.withCredentials = true- Base URL: Points to the backend server
- Credentials: Enables cookie-based session management
Make sure you have set VITE_WALLET_CONNECT_PROJECT_ID in your .env.local file.
This occurs if the WagmiProvider is not wrapping your components. This has been resolved by wrapping the app in src/routes/__root.tsx.
- Ensure the backend is running on
localhost:5000 - Check that
withCredentials: trueis set in axios config - Verify CORS is properly configured on the backend