https://github.com/felipebrenner/ignite-reactjs-nextauth
Projeto de estudo de autenticação, autorização e refresh token desenvolvido nas aulas do Chapter IV da trilha de ReactJS do Bootcamp Ignite da Rocketseat
https://github.com/felipebrenner/ignite-reactjs-nextauth
axios ignite nextjs nookies reactjs rocketseat typescript
Last synced: about 1 month ago
JSON representation
Projeto de estudo de autenticação, autorização e refresh token desenvolvido nas aulas do Chapter IV da trilha de ReactJS do Bootcamp Ignite da Rocketseat
- Host: GitHub
- URL: https://github.com/felipebrenner/ignite-reactjs-nextauth
- Owner: FelipeBrenner
- Created: 2021-07-21T13:40:31.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-07-25T23:47:47.000Z (almost 5 years ago)
- Last Synced: 2025-05-07T19:52:54.136Z (about 1 year ago)
- Topics: axios, ignite, nextjs, nookies, reactjs, rocketseat, typescript
- Language: TypeScript
- Homepage:
- Size: 206 KB
- Stars: 0
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Autenticação e autorização
## 🚀 Tecnologias e bibliotecas utilizadas
- React.js
- Next.js
- TypeScript
- Axios
- nookies (biblioteca para gerenciamento de cookies no Next.js)
## 💻 Repositório
Projeto desenvolvido estudando como criar um processo completo de autenticação, autorização e refresh token dentro do React com Next.js, permitindo controlar o acesso à rotas e componentes tanto no client-side quanto no server-side.
## 📖 Anotações
- JWT (JSON Web Token) é armazenado no sessionStorage, localStorage, ou cookies. Refresh Token é armazenado junto, e também normalmente no banco de dados do back end.
- sessionStorage: é limpado ao fechar o navegador e abrir novamente;
- localStorage: se mantém ao fechar ao fechar o navegador, reiniciar a máquina, etc; só existe no browser, o servidor não tem acesso, portando por exemplo se é usado Next.js já não da para utilizar;
- cookies: pode ser acessado tanto no browser quanto no servidor;
- BroadcastChannel: API utilizada para permitir a comunicação entre diferentes documentos (em diferentes janelas, abas, frames ou iframes) da mesma origem, no caso desta aplicação, para realizar o logout e login automático.
## ⚙ Clone e execução
```bash
# Abra um terminal e clone este repositório com o comando
$ git clone https://github.com/FelipeBrenner/ignite-reactjs-nextauth.git
# Acesse a pasta da aplicação
$ cd ignite-reactjs-nextauth
# Instale as dependências
$ yarn
# Clone o projeto do back end para realização do login e autenticações
$ git clone https://github.com/rocketseat-education/ignite-reactjs-auth-backend.git
# Acesse a pasta da aplicação
$ cd ignite-reactjs-auth-backend
# Instale suas dependências
$ yarn
# Pode iniciar ambas aplicações, back e front
$ yarn dev
```
---
Por Felipe Brenner