Shows how to secure Netlify web apps and serverless functions with Logto authentication, complete with source code examples and a live demo preview.
Netlify is a powerful platform for deploying and hosting modern web projects, offering seamless Git integration, automated builds, and serverless functions for a fast and scalable development workflow.
In this comprehensive guide, you will learn how to:
Checkout the online demo preview.
These are the things you'll need to set up before starting this tutorial:
Follow Vite's Getting Started Guide to create a React app.
According to the creation guide and select your desired technology stack. In this article, we'll choose React + TypeScript.
Then enter the project root directory, install dependencies according to the guide, and run the application.
Follow the Get started with Netlify guides to deploy your application.
Once you have deployed your app, you can see the live site at https://<your-site-name>.netlify.app.
Make a note of this URL as we'll need it later to configure Logto.
To get started with Logto authentication:
https://<your-instance>.logto.app/)
These credentials will be required in subsequent steps.Note that in our demo, we use the /callback route to handle Logto's Sign-in redirect. The Redirect URIs in Logto needs to be configured as https://<your-site-name>.netlify.app/callback.
After users log out, we return to the homepage, so we set the Post sign-out redirect URIs to https://<your-site-name>.netlify.app.
Then set the information of our created Logto Application in Netlify's Environment variables (Your website -> site configuration -> Environment variables):
Then we use these configurations in our frontend project:
You can view the final integrated code here: example-vite-react-logto.
Note that when we deploy to Netlify and log in through Logto, our URL doesn't automatically redirect to our Callback page. This is because Netlify doesn't support client-side routing for single-page applications (SPA) by default.
When you visit paths like /callback, Netlify will try to find corresponding files on the server instead of forwarding the request to your React application.
At this point, we need to create a _redirects file in the public directory of your Netlify project to tell Netlify to redirect all requests to your index.html:
Alternatively, you can create a netlify.toml file in your project root:
Now our routing should work properly.
Netlify Functions provides a simple yet powerful way to build backend APIs. With Netlify Functions, we can write server-side logic without worrying about traditional server configuration and maintenance.
These functions are version-controlled, built, and deployed alongside your website, making the development and deployment process seamless between frontend and backend.
Let's start building our backend APIs using Netlify Functions.
First, we need to create a functions directory under the project's netlify directory, then create a hello.ts file:
When we visit https://<your-site-name>.netlify.app/.netlify/functions/hello, this function will be called and return "Hello world!"".
If you think the path /.netlify/functions/hello looks a bit strange, you can set up a redirect to invoke the function by adding a redirect rule in the public/_redirects file:
This way, when we visit https://<your-site-name>.netlify.app/api/hello, it will call our function and return "Hello world!". This is actually the common way to build APIs using Netlify functions.
And we can access this API in our frontend project using fetch:
Now that we have a backend API, we need to ensure that only authenticated users can access it. We'll protect our Netlify functions using Logto's authentication mechanism.
To protect our API endpoints:
https://api.backend.com)Now, let's implement the token validation in our backend to ensure only requests with valid access tokens are processed.
Fist, we need to install the jose dependency to help us verify the JWT token:
Then, we can implement the token validation in our backend:
Now, let's update our Netlify function to use the verifyLogtoToken function:
That's it! Now, our Netlify function is protected by Logto and only requests with valid access tokens will be processed.
Now, deploy your app to Netlify and test it out! You can refer to the online demo preview here.
https://<your-site-name>.netlify.appapi/hello endpoint.This guide demonstrates how to integrate Logto authentication into a web application deployed on Netlify.
By configuring Logto applications and API resources, we implemented frontend authentication and protected Netlify Functions endpoints.
For more granular access control, you can leverage Logto's RBAC (Role-Based Access Control) capabilities by defining roles and permissions in Logto Console and validating user roles within Netlify Functions.