Last updated
Last updated
This guide provides an example of how to set up your dapp to authenticate your users using SSX and NextAuth. allows you to authenticate with multiple identity providers, and SSX enables you to add Sign-in with Ethereum authentication to your Next.js dapp easily.
This example follows along the example implementation, built with npm init @rainbow-me/rainbowkit@0.1.9
. You can create from the rainbow template using the package manager of choice:
Install and with your package manager of choice:
In your dapp, we will add an API route (pages/api/auth/[...nextauth].ts
) for NextAuth and configure it with SSX. SSX provides configured credentials
and authorize
functions to create a NextAuth provider. SSX also provides a session
function, but it is likely you will want to modify the contents of the function to provide specific session data from the server to the frontend client.
Next, you'll add the SSX provider and NextAuth Session provider to the front end. This is done in the pages/_app.tsx
file. Adding the providers here makes them available for any child component to access the session data.
Now that you've set up the SSX and NextAuth Providers, you can use their corresponding hooks to access user information to protect pages from unauthorized access. Let's create our first protected route in pages/protected.tsx
with the following code:
And let's give it some style in styles/Protected.module.css
with the following:
Now update the pages/index.tsx
file with the following code:
Now that you have authentication in your dapp, take a deeper dive into some of the capabilities SSX gives you, like , , or
Have any questions? Hop into the and ask!