Next.js - Autenticação JWT com back-end próprio - Code/Drops #72
Rocketseat・63 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
Dave Gray
Next-Auth Login Authentication Tutorial with Next.js App Directory
Dev Inteprid
Role-based Authentication in Next 14 using Next-Auth | App Router | Protected Routes | Custom Hooks
Lee Robinson
Next.js App Router Authentication (Sessions, Cookies, JWTs)
Dave Gray
Next.js Role-Based User Authorization & Access Control | Next Auth Protected Routes
Nico Albanese
Build Next.js apps at the speed of thought - Kirimase generate command deep dive
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.
