Integrate PlanetScale in your Next.js site and authenticate using Netlify Identity
by Karin Hendrikse
Thanks to services like PlanetScale, creating a MySQL database for your site is easier than ever! And by adding Netlify Identity you get to protect your site with authentication as well. In this tutorial we’ll guide you through setting up PlanetScale through our amazing integration and how to implement Netlify Identity as well.
The finished result will be a very simple site using Next.js, PlanetScale, Netlify Identity and Netlify Functions where a user can sign up, log in and where we can get, post and delete data from our database. For a quick talk through some of the details, you can dip in to this short video,
Or if you want to dive right in to explore the repository and deploy a demo, click the deploy To Netlify button below (After you’ve clicked that button, make sure to follow the steps to enable PlanetScale and Netlify Identity down below, and it should work!).
Done exploring the example site and ready to explore and understand the steps to build this? Let’s go! Let’s create a basic Next.js site and deploy it to Netlify, in your terminal run:
Follow the default options, we decided to use the src directory. Then, let’s deploy it to Netlify. Make sure to have the Netlify CLI installed and to log in using the command netlify login. Then, run cd my-next-app and commit and push your repository to a service like GitHub. After this run netlify init and follow the prompts. When you’re done, run netlify open to open your site’s settings in your Netlify account.
Did you know!
Netlify CLI provides all sorts of helpers and utilities
netlify open --site — opens your deployed site in your browser
netlify open --admin — opens your site admin in your browser (default)
Discover more by running netlify help in your terminal.
The database in your PlanetScale account should have the following table:
Netlify integrations provide a convenient way to authenticate with third-party tools and services so that developers in your organisation can easily make use of them.
In your Netlify site view, navigate to Integrations and under the Database category enable PlanetScale. On the next page, click ‘connect’. You’ll be redirected to PlanetScale where you can authorise Netlify to access your database. Once you’ve done that, you’ll be redirected back to Netlify and you can select your organisation, database and configure which PlanetScale branch should be used in what environments for your Netlify site.
The composable architecture we’re using here affords us the option to use a variety of different Identity providers, but for this example we’ll use Netlify Identity. In your Netlify Site Configuration, go to the Identity tab and enable Identity. You won’t be using any external providers for this example so you don’t need to configure those.
We’ll be using React Context to make the Netlify Identity instance available to all components in our app. Create a new file src/context/authContext.tsx and add the following contents:
This will create a netlifyAuth object that we can use to interact with Netlify Identity. Now let’s create AuthContext and implement the netlifyAuth object.
And now we’ll create the provider:
We’ll now be navigating to your app’s layout file, in our case it is located at src/app/layout.tsx, we’ll wrap the app in the AuthContextProvider:
From now on, all children of the AuthContextProvider will have access to the AuthContext we created earlier. This means we’ll be able to use the different functions from the AuthContext to add login and logout buttons to our app.
Time to try it out! Commit your work and push it.
The site will automatically be redeployed on Netlify. You can jump straight to the deployed site to try it out with netlify open --site but to assist with troubleshooting during development you can also run it locally, complete with access to the integrations with netlify dev. You should be able to log in and log out of the example app now! The first time you register it will send you through the production registration flow. This means that locally you’ll have to log in with the credentials you set up on production to see your logged in state. You can also check the Netlify Identity tab in your Netlify Site Configuration view to see the users that have been created.
Now that we have Netlify Identity set up, let’s add a form to create issues in our PlanetScale database. Add the following code to src/app/page.tsx:
We need something to handle and process the POST submissions from our form. Netlify Functions are an ideal way to do this without adding the dependency of a server. We’re actually going to add a number of APIs using serverless functions to support the functionality of our app as we progress.
Let’s start with handling the form submissions and creating a new issue in our database. Create a new file netlify/functions/create.ts and add the following code:
It should now be possible to create issues in your PlanetScale database! Try adding one and then checking your PlanetScale database to see if it worked.
Now that we can create issues, let’s add a list of issues to our app. We’ll create a new serverless function to get all issues from our PlanetScale database. Create a new file netlify/functions/get.ts and add the following code:
Now inside of src/app/page.tsx we’ll add a new useEffect hook to fetch the issues from our PlanetScale database. We’ll also add a new state variable to store the issues in. After a new issue is submitted we’ll also fetch the issues again to update the page. The code will look like this:
#Delete users from Netlify Identity and their entries from PlanetScale
We want to make sure that users can also delete their account and issues. Let’s make a new serverless function in netlify/functions/delete.ts. In that file we’ll check if the user is currently logged in and authenticated, and then we delete that user Netlify Identity, and delete all of their entries from our PlanetScale database. The code will look like this:
Inside the deleteAccount function in the authContext file, we’ll do a call to the function we just created. We’ll first ask the user to confirm they want to delete their account, and then we’ll call the serverless function. The code will look like this:
This function is exported in the AuthContext provider, so you can use it in any children of the AuthContextProvider. For example by providing a button that calls the function.
If you want to see the full code of our example, check out the repository here. If you want to deploy the example site to your Netlify account, feel free to click the Deploy to Netlify button down below
After you’ve clicked that button, make sure to follow the steps to enable PlanetScale and Netlify Identity in this article.
Congrats! You now have a working example and you are ready to start building your own app! You’ve learned how to use the PlanetScale integration on Netlify and how to implement Netlify Identity. If you want to try out more, here are some ideas: