Hey readers! In this blog we will dive deep into the Auth() in Next js, if you’re new and have no idea about what is Next js, do check out the article and course of Next js on Codedamn.
What is Next js?
What is Auth()?
The Auth() is an Identity Platform used which is a unit within Okta. It uses a modern approach for identification and enabling secure access for an organization in any application. This platform is highly customizable and flexible as per the requirements of the development of an application. It delivers privacy, convenience, and security to its clients so as to innovate and design better applications.
But why do we need Next js for Auth?
Well, the most astonishing feature of Next js is the support of authentication which is simple to integrate. One such example could be the Passport, which depends on Express for availability and does not provide performance and scalability, hence the need for the Next js framework.
Next js approach for building Static Site application
This approach allows creating a static stand-alone application even without the need for a Node js server. In order to generate an HTML file for each page, run the next build and next export command. This generated output can then be used to deploy a site to any static web hosting service like Netlify etc
This technique can be used to complete a website as a static file just like the front page of an application.
How does this model handle authentication?
In this, the server handles interaction with Auth and it creates a session. All of this happens at the front-end and there is no backend involved here.
Here is how the model works in the application internally:
- The static site redirects the user to log in page which has Auth()
- After a successful log in session, the Auth() redirects the user to the static page
- The code is being exchanged between the static page or site and Auth() which then retrieves the data of users like token id id_token and access_token stored in the application’s memory.
In the case of dynamic content rendering, an API is needed to be integrated into an application. The API won’t be a part of a static site. To deploy applications like this, platforms like Heroku, AWS Lambda, or Now are used. The client-side or the static page will use the access_token in order to make secure calls with the API, fetch the dynamic content, and render it onto the static page of the application.
The custom server model of Next js
This approach is very common in Next js where custom servers are used for hosting the Next js application. Express js is used for implementing a custom server in the Next js application. The working of this server can be further broken down into three steps application:
- The request is accepted by a custom server
- app.getRequestHandler() method is invoked by a custom server to fetch the Next js request handler
- The request is then forwarded by the custom server to the Next js request handler
In this model, the custom server act as a proxy, and the request is processed before Next js handles it. Middleware provides building blocks to the application and is executed before the rendering of Next js server-side rendering is done.
Features of using Next js Middleware in the application:
- Rate limiting
- Enforcing authorization and authentication
Once a session is available in the application of a user, the API endpoint and page are rendered after which authentication is required using the Next js API route. The user application sends cookies along with the request due to which information is readily available on the server-side and the front-end.