Next.js - Autenticação JWT com back-end próprio - Code/Drops #72

Rocketseat2 minutes read

The text discusses authentication models for Nexus applications, offering practical examples, such as NextAuth and JWT, with a focus on security levels and various authentication providers. It emphasizes the importance of user authentication status tracking, token storage using cookies, and server-side rendering for authentication validation in Next.js.

Insights

  • Next provides two main authentication providers: NextAuth and JWT, with JWT recommended for applications requiring high security levels, while NextAuth integrates with various providers for easy social authentication.
  • User authentication in Next.js involves saving data in cookies, persisting user sessions, and validating authentication on both client and server sides, with server-side rendering ensuring authentication validation without page refresh.

Get key ideas from YouTube videos. It’s free

Recent questions

  • What are the main authentication providers discussed?

    NextAuth and JWT

  • How is user authentication status determined?

    By presence in the application state

  • What is the recommended method for storing tokens in a front-end application?

    Using cookies

  • How is user information retrieved in the authentication service?

    Using a function called "recovery user information"

  • What is the purpose of the Axios interceptor in authentication?

    To monitor data being sent in requests

Related videos

Summary

00:00

"Managing Gifts, Authentication Models, and Pricing"

  • The dashboard allows for managing gifts, with the option to refresh the page with F5.
  • Deleting a user named Tom automatically redirects to the login page.
  • Server-side redirection and touch evaluation prevent unauthorized access to page 10.
  • Next discusses authentication models for Nexus applications, offering practical examples.
  • Next provides two main authentication providers: NextAuth and JWT.
  • NextAuth integrates with various authentication providers for easy social authentication.
  • JWT is recommended for applications requiring high security levels.
  • Doctor link offers authentication via email links, popular for consumer software.
  • Other authentication providers like AWS Cognito offer comprehensive authentication systems.
  • Pricing for authentication services varies based on active users, with costs increasing for higher user numbers.

14:09

Integrating Form with Authentication in React

  • The text discusses integrating a form with the iett in the creek, focusing on the function and uniform.
  • The main information needed from the form is the raster raster for simple registration.
  • Two fields, email and password, are mentioned, with instructions on how to handle them using a spread operator.
  • A function called redouça em me is created to handle form data.
  • Authentication is highlighted as a crucial aspect that needs to be present across various components of the application.
  • An account folder is suggested to be created in tsx format for authentication purposes.
  • The creation of an authentication context structure is detailed, including the need for a variable to track user authentication status.
  • An authentication function is discussed, emphasizing the importance of accessing it from multiple pages.
  • A simulation of backend actions is described, including the creation of a delay function and the generation of unique IDs for user data.
  • The process of calling the authentication function with user data is explained, with a focus on clean code practices like parameter naming.

27:49

"Token Storage Strategies in Next.js Applications"

  • The function returns "ottokim" and "user" for authentication purposes in a hot foot application.
  • The function requires storing a "Toquinho" token to authenticate user requests.
  • Two strategies for storing the token in a front-end application are discussed: using browser history or cookies.
  • Next.js, a front-end development tool, has limitations in accessing browser history for token storage.
  • Cookies are recommended for storing tokens due to accessibility from both client and server sides.
  • The "universal-cookie" library is suggested for managing cookies in Next.js applications.
  • The "setcookie" function from the library is used to save token information on the server side.
  • User information is saved in the application state for real-time updates and accessibility.
  • The function for authentication is exposed to components along with user data.
  • User authentication status is determined by the presence of user information in the application state.

41:27

"User Authentication and Token Management in ERP"

  • A function is created to trigger a side effect when a component is displayed on the screen in an application's ERP.
  • The function checks for saved user cookies upon the component's display to authenticate the user.
  • A function called "Wars cookies" is imported to retrieve all cookies, and the user's token is extracted from the cookies.
  • User information is retrieved using a function called "recovery user information" in the authentication service.
  • The user data is set in the application's state after being retrieved.
  • An HTTP client, Axios, is used to send requests to the backend, and a JWT token is added to the headers for authentication.
  • An interceptor is created in Axios to monitor the data being sent in requests.
  • Requests are made to check if the token is being sent correctly in the headers.
  • The user's token is updated upon authentication to ensure continued access to the application.
  • User authentication is validated on specific pages by checking for the presence of the user's token in cookies, redirecting to login if not authenticated.

55:37

"Next.js Authentication: Cookies, Server-Side Rendering"

  • To access 10 items per page, press F5 to view in the console and server-side, and console.log on the browser side.
  • Cookies are generated by the application, allowing authentication checks based on user status.
  • Utilize the "looks" package to access cookie functions within the application.
  • Redirect unauthenticated users to the login page instead of displaying initial information.
  • Server-side rendering in Next.js ensures authentication validation without page refresh.
  • Export a function to handle context-based calls for cookies on the server-side.
  • Authentication in Next.js involves saving data in cookies, persisting user sessions, and validating authentication on both client and server sides.
Channel avatarChannel avatarChannel avatarChannel avatarChannel avatar

Try it yourself — It’s free.