diff --git a/en/asgardeo/docs/complete-guides/nextjs/securing-routes-within-the-app.md b/en/asgardeo/docs/complete-guides/nextjs/securing-routes-within-the-app.md index 85114bc273..c5bf356af4 100644 --- a/en/asgardeo/docs/complete-guides/nextjs/securing-routes-within-the-app.md +++ b/en/asgardeo/docs/complete-guides/nextjs/securing-routes-within-the-app.md @@ -1,13 +1,59 @@ --- template: templates/complete-guide.html heading: Securing Routes within the app -read_time: 2 min +read_time: 4 min --- -The `` component we developed in the previous step should only be accessible when a user is already logged in. Because if a valid user is not in the session, there is no point of showing an empty profile page. Therefore we need to secure the route: http://localhost:3000/profile itself. This can vary depending on the router that you are using. In this example, we will be using the Next router to demonstrate how to secure a route using Auth.js. +The `` components (server-side and client-side) we developed in the previous step should only be accessible when a user is already logged in. Because if a valid user is not in the session, there is no point of showing an empty profile page. Therefore we need to secure the routes: **http://localhost:3000/client-profile** and **http://localhost:3000/server-profile**. In this example, we will be demonstrating how to secure a route using Auth.js in both server-side and client-side. +## Securing the Server-Side Components -## Create a Higher-Order Component (HOC) - withProtectedRoute +### Update middleware to secure the server-side route + +Recall that we created a `middleware.ts` file in the root of the `src` directory when configuring Auth.js? We will now update this file with the following configuration to securet the `/server-profile` route as follows. + +```javascript title="src/middleware.ts" hl_lines="4" +export { auth as middleware } from "@/auth" + +export const config = { + matcher: ["/server-profile"] +}; +``` + +By defining a `matcher` configuration, we can control which routes trigger the middleware. For example, with a matcher set to ["/server-profile"], the middleware only runs for requests to **/server-profile**. This approach centralizes authentication logic while keeping other routes unaffected. + +### Handle redirection using callbacks + +Using the `authorized` callback in Auth.js, we can ensure that only authenticated users can access protected routes. + +```javascript title="src/auth.ts" +... +export const { handlers, signIn, signOut, auth } = NextAuth({ + ... + callbacks: { + ... + authorized: async ({ request, auth }) => { + // Logged in users are authenticated, otherwise redirect to index page + console.log({ request, auth }); + + if (!auth) { + return Response.redirect(new URL("/", request.nextUrl)) + } + + return !!auth + }, + } +}) +``` + +This callback checks the auth parameter, which holds the user's authentication data. If the user is not authenticated (auth is null or undefined), they are redirected to the login page (/) using `Response.redirect()`. For authenticated users, the function returns true, allowing access. + +Now verify that you cannot access http://localhost:3000/server-profile URL when you are not logged in. You will be redirected to http://localhost:3000 if you do not have a valid user logged in. + + +## Securing the Client-Side Components + +### Create a Higher-Order Component (HOC) - withProtectedRoute A higher-order component in React is a function that takes a component and returns a new component (with additional functionality). The HOC `withProtectedRoute` will check if a user is authenticated and either render the component or redirect the user to the login page. @@ -98,7 +144,7 @@ export default withProtectedRoute(Profile); ``` -Now verify that you cannot access http://localhost:3000/profile URL when you are not logged in. You will be redirected to http://localhost:3000 if you do not have a valid user logged in. +Now verify that you cannot access http://localhost:3000/client-profile URL when you are not logged in. You will be redirected to http://localhost:3000 if you do not have a valid user logged in. In this step, we looked into how to secure component routes within a Next.js app. Next, we will try to access a protected API from our Next.js app, which is a common requirement.