{"id":15155252,"url":"https://github.com/alan2207/nextjs-jwt-authentication","last_synced_at":"2025-09-30T03:31:10.057Z","repository":{"id":49036935,"uuid":"121483571","full_name":"alan2207/nextjs-jwt-authentication","owner":"alan2207","description":"A proof of concept app for demonstrating authentication of Next.js app with JWT.","archived":true,"fork":false,"pushed_at":"2021-07-23T20:04:59.000Z","size":565,"stargazers_count":290,"open_issues_count":2,"forks_count":35,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-09-27T18:03:36.750Z","etag":null,"topics":["authentication","jwt","next","nextjs","nodejs","react","server-side-rendering"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alan2207.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-14T07:36:58.000Z","updated_at":"2024-08-09T07:36:04.000Z","dependencies_parsed_at":"2022-09-17T03:51:06.796Z","dependency_job_id":null,"html_url":"https://github.com/alan2207/nextjs-jwt-authentication","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan2207%2Fnextjs-jwt-authentication","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan2207%2Fnextjs-jwt-authentication/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan2207%2Fnextjs-jwt-authentication/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alan2207%2Fnextjs-jwt-authentication/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alan2207","download_url":"https://codeload.github.com/alan2207/nextjs-jwt-authentication/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234695724,"owners_count":18873024,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","jwt","next","nextjs","nodejs","react","server-side-rendering"],"created_at":"2024-09-26T18:03:46.377Z","updated_at":"2025-09-30T03:31:04.751Z","avatar_url":"https://github.com/alan2207.png","language":"JavaScript","readme":"\n# Next.js JWT Authentication\n\n\nA proof of concept app for demonstrating authentication of Next.js app with JWT. \n\nThe app is made under the assumption that the rendering server and the API server are decoupled.\n\nIt uses [this API](https://github.com/alan2207/express-server-jwt) for authentication.\n\n![Demo](demo.gif?raw=true \"Demo\")\n\n## Idea:\n\nServer side rendered apps are awesome. They make a sweet spot between monolithic apps and single page apps powered by microservices. But they also add complexity to their creation. Keeping state on the server and the client in sync, routing on the client and the server, loading data before server rendering, etc. are some of the things that make our apps more complex. That is why frameworks such as Next.js exist, to solve most of those problems. However, things such as authentication are left to us. This is an attempt to implement the authentication based on JWT. The thing is that we can't store tokens in localStorage as we would do with SPA.\n\nThe idea is to receive token from the server on the client, store it in cookies, and then whenever a page renders on the server, we would be able to access the token from the cookie.\n\n## How it works:\n#### The client:\nThe user sends an auth request from the client. In the response, JWT is received, and stored in browser cookies and redux store. Then the user has access to the token from the client, and can use it to access protected routes.\n\n#### The server:\nWhen the user makes a page request, cookies are also sent along, so the server can read them. To read it, the user is using the `getInitialProps` lifecycle method, provided by Next.js. It gets an argument - the context object that contains some properties. You can read more about it [here](https://github.com/zeit/next.js/#fetching-data-and-component-lifecycle). On the `req` property, we can access `headers` property which contains the cookie with the token. An action creator is dispatched to save the token in the redux store, and the app now has access to the token again.\n\n\n\n## Usage:\n\n### Installation:\n\nMake sure you have Node and NPM installed.\n\nAlso make sure you have the [API server](https://github.com/alan2207/express-server-jwt) running.\n\n```bash\ngit clone https://github.com/alan2207/nextjs-jwt-authentication\ncd nextjs-jwt-authentication\nnpm install\n```\n\n### Starting the app:\n```bash\n# Run in dev mode:\nnpm run dev\n\n# Run in production:\nnpm run build\nnpm start\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falan2207%2Fnextjs-jwt-authentication","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falan2207%2Fnextjs-jwt-authentication","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falan2207%2Fnextjs-jwt-authentication/lists"}