codedamn logo
codedamn

Auth() in Next js: What is Auth() and how to use it?

  • Vishnupriya's profile image
    Vishnupriya
    Team codedamn
Auth() in Next js: What is Auth() and how to use it?

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?

It is a minimalistic framework used for building SPA (Single Page Application) of JavaScript in a customizable way. It supports SSR (Server- Side Rendering) and has high performance. This is why it is extensively used today for building large-scale complex applications in an easy way. 

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.

Next js
Static Site

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.

Next js
Custom Server Model

Features of using Next js Middleware in the application:

  • Sessions
  • Authentication
  • 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. 

Conclusion

This was all about the Auth() in Next js, if you want to learn more about Auth(), authentication and authorization, and security, do check out the article on codedamn related to Next js and subscribe to the YouTube channel of Codedamn. Hope you liked this, if you have any queries or suggestions do let us know in the comments.  If you are interested in learning JavaScript, do check out courses on codedamn with an in-built environment playground to learn and practice code. Join the community of codedamn and do check out other articles related to programming and development on codedamn and subscribe to our newsletter to never miss out on our new programs and updates. If you have any queries or feedback do let us know in the comment section.

User avatar