DEV Community

Starch1
Starch1

Posted on • Edited on

2

Desenvolvendo um login com NodeJS, MongoDB, Express e Passport.

Introdução

Este artigo explora a utilização do Express.js, um framework que simplifica a estruturação de aplicações web por meio de middleware e rotas. Além disso, aborda o MongoDB, um banco de dados NoSQL popular que oferece uma abordagem distinta para o armazenamento de dado

Express.js é um framework que simplifica a organização de funcionalidades em aplicações, facilitando o uso de middleware e a definição de rotas.

MongoDB é um banco de dados NoSQL popular. Ao contrário dos bancos relacionais, como tabelas, o MongoDB oferece uma abordagem diferente para armazenar dados, utilizando o formato chamado BSON.

Passport.jsé um middleware de autenticação flexível para NodeJS. Ele pode ser facilmente integrado em qualquer aplicação web baseada em Express, tornando a implementação de autenticação mais simples e personalizável.

Passos para criar o projeto e instalar os modulos:

Vamos iniciar um novo projeto usando

npm init
Enter fullscreen mode Exit fullscreen mode

Instale os modulos usando o comando

npm i express ejs mongoose body-parser express-session
npm i passport passport-local 
npm i passport-local-mongoose 
Enter fullscreen mode Exit fullscreen mode

Crie duas pastas dentro do diretorio do projeto usando o comando

mkdir model
mkdir views
Enter fullscreen mode Exit fullscreen mode

Crie um arquivo app.js
Dentro da pasta model, crie um arquivo User.js o que vai ter os nossos Schemas
Dentro da pasta views crie os seguintes arquivos

home.ejs
login.ejs
secret.ejs
register.ejs
Enter fullscreen mode Exit fullscreen mode

EJS é uma linguagem de modelo que permite incorporar codigo JS diretamente em um arquivo de modelo.

Estrutura do projeto deve se parecer com algo assim

Image description

Dependencias no package.json

"dependencies": {
    "body-parser": "^1.20.2",
    "ejs": "^3.1.9",
    "express": "^4.18.2",
    "express-session": "^1.17.3",
    "mongoose": "^8.1.0",
    "passport": "^0.7.0",
    "passport-local": "^1.0.0",
    "passport-local-mongoose": "^8.0.0"
  }
Enter fullscreen mode Exit fullscreen mode

No User.js vamos definir um schema que recebe dois campos usernamee password, o passportLocalMongooseadiciona os metodos e campos adicionais ao schema pra facilitar a autenticação local.

//Arquivo User.js
const { default: mongoose } = require('mongoose')
const mangoose = require('mongoose')
const Schema = mongoose.Schema 

const passportLocalMongoose = require('passport-local-mongoose')

const User = new Schema({
    username: {
        type: String
    },
    password: {
        type: String
    }
})

User.plugin(passportLocalMongoose)

module.exports = mongoose.model('User', User)
Enter fullscreen mode Exit fullscreen mode

No arquivo app.js vamos começar definindo as libs do projeto

//Arquivo app.js

const express = require("express"),
    mongoose = require("mongoose"),
    passport = require("passport"),
    bodyParser = require("body-parser"),
    LocalStrategy = require("passport-local"),
    passportLocalMongoose = 
        require("passport-local-mongoose")
const User = require("./model/User")
let app = express()
Enter fullscreen mode Exit fullscreen mode

Vamos criar uma conexão com o MongoDB

mongoose.connect("mongodb://localhost/27017")
Enter fullscreen mode Exit fullscreen mode

Vamos configurar o express para usar a engine de visualização do EJS, configurar o middleware para processar os dados do formulário e a autenticação com Passport.js


app.set('view engine', 'ejs')
app.use(bodyParser.urlencoded({ extended: true}))
app.use(require("express-session")({
    secret: "xxx",
    resave: false,
    saveUninitialized: false
}))

app.use(passport.initialize())
app.use(passport.session())

passport.use(new LocalStrategy(User.authenticate()))
passport.serializeUser(User.serializeUser())
passport.deserializeUser(User.deserializeUser())

Enter fullscreen mode Exit fullscreen mode

Agora vamos configurar as rotas GET com express.

app.get('/', (req,res)=>{
    res.render('home')
})


app.get('/secret', isLoggedIn, (req,res)=>{
    res.render('register')
})

app.get('/register', (req,res)=>{
    res.render('register')
})


app.get('/login', (req,res) =>{
  res.render('login')
})

Enter fullscreen mode Exit fullscreen mode

Vamos definir a rota que vai tratar as solicitações post para o endpoint /register, que cria um novo usuario com base no dados fornecidos no formulario do register.ejs.

app.post('/register', async (req,res)=>{
    const user = await User.create({
        username: req.body.username,
        password: req.body.password,
    })
    return res.status(200).json(user)
})
Enter fullscreen mode Exit fullscreen mode

Agora definir a rota de login que lida com autenticação dos usuarios e logout que, bom, faz log out

app.post('/login', passport.authenticate('local', {
  sucessRedirect: '/secret',
  failureRedirect: 'login',
 // failureFlash: true,
}))

app.get("/logout", (req, res)=> {
    req.logout((err)=> {
        if (err) { return next(err) }
        res.redirect('/')
      })
})
Enter fullscreen mode Exit fullscreen mode

Vamos criar uma função que age como middleware que vai garantir que só usuários autenticados tenham acesso a rotas privadas da aplicação.

function isLoggedIn(req,res,next){
    if(req.isAuthenticated()) return next()
    res.redirect('/login')
}
Enter fullscreen mode Exit fullscreen mode

Por fim vamos definir a porta para acessar-mos e fazer os testes localmente e por o servidor online.

const port = 3000 
app.listen(port, ()=>{
    console.log('🔥')
})
Enter fullscreen mode Exit fullscreen mode

Pra tudo acima funcionar você precisa ter o um servidor mongoose rodando. Caso não tenha eu escrevi um artigo sobre como preparar o ambiente Preparando ambiente de trabalho MongoDB

Você pode iniciar o servidor com o comando

mongod
Enter fullscreen mode Exit fullscreen mode

Depois navegue até a pasta onde está o app.js e digite no terminal

node app.js
Enter fullscreen mode Exit fullscreen mode

Abra o navegador e digite na barra o endereço:

http://localhost:3000/
Enter fullscreen mode Exit fullscreen mode

Conclusão

Integrando essas tecnologias, você ganha não apenas eficiência no desenvolvimento, mas também uma base sólida para construir aplicações escaláveis e seguras. O uso intuitivo de middleware, a flexibilidade do MongoDB e a robustez da autenticação com Passport.js proporcionam uma experiência de desenvolvimento acessível, mesmo para aqueles que estão começando.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more