Informacje z serwera w Cookie'es

Question

Zacząłem pisać aplikację typu social media z użyciem React i Node.js. Proces autoryzacji i autentykacji chcę zrobić za pomocą JWT. Z tego co wyczytałem to dany token najlepiej przechowywać w ciasteczkach, i przy każdym zapytaniu do serwera wysyłać go do serwera. I teraz moje pytanie jak się obnosić z podstawowymi danymi użytkownika (imię, nazwisko, zdjęcie profilwe, itd.). Ponieważ chciałbym mieć zawsze do nich dostęp zastanawiam się czy dobrym pomysłem, aby te informacje poza Redux'em również przechowywać w ciasteczkach, ponieważ boję się, że przy odświeżaniu strony stan Redux'a będzie się czyścił i strona się wysypie.

Answer 1

 Z tego co wyczytałem to dany token najlepiej przechowywać w ciasteczkach, i przy każdym zapytaniu do serwera wysyłać go do serwera.

Nie. Najlepiej taki token trzymać w pamięci (jakiejś zmiennej w Jsie). Do tego posługujesz się refresh tokenem trzymanym w Cookie Http Only + Secured.

aby te informacje poza Redux'em również przechowywać w ciasteczkach, ponieważ boję się, że przy odświeżaniu strony stan Redux'a będzie się czyścił i strona się wysypie.

Nic takiego w ciasteczkach. Jeżeli już coś musisz przechowywać (i nie są to dane wrażliwe) to albo session storage albo local storage. Fakt - po odświeżeniu, stan zapisany w Reduxie zostanie zresetowany ale nie przeszkadza to w tym, żeby Komponent na nowo wysłał request do serwera i pobrał odpowiednie dane. Dane takie jak imie, nazwisko itd bez problemu możesz trzymać w Reduxie i napisać logikę, odpowiedzialną za pobranie danych po odświeżeniu strony.

Comments

@Aisekai, Rozumiem sens tego rozwiązania, ale nie za bardzo jak to działa. Czy dobrze myślę ? Wysyłam accessToken i w przypadku jeśli coś z nim jest nie tak, odsyłam do klienta wiadomość, że token jest nieprawidłowy. Wtedy klient wysyła prośbę o nowy accessToken, przesyłając refreshToken. Na jego podstawie tworzę nowy accessToken i odsyłam do klienta. Wtedy klient ponawia request, który wysłał na początku.

---

Tutaj masz wytłumaczone:

https://youtu.be/iD49_NIQ-R4

---

Stworzyłem coś takiego, jest to póki co tylko rejestracje, ale logowanie będzie działać w sumie tak samo. Prosiłbym tylko o ocenę, czy napisane w porządku, czy może coś by trzeba było poprawić.

 

require('dotenv').config();
const express = require("express");
const bcrypt = require("bcrypt");
const jwt = require("jsonwebtoken");

const router = express.Router();

// User model 
const User = require("../../models/User");

// @route   POST api/users
// @desc    Register new user
// @access  Public

router.post('/register', async (req, res) => {
    const { name, surname, email, password, city, birth } = req.body;

    // Validation
    if (!name || !surname || !email || !password || !city || !birth) {
        return res.status(400).json({ msg: "Please enter all fields." });
    }

    // Check for existing user
    User.findOne({ email })
        .then(async user => {
            if (user) return res.status(400).send({ msg: "User already exist." })

            try {
                const hashedPassword = await bcrypt.hash(password, 10);
                const newUser = new User({
                    email,
                    password: hashedPassword,
                    name,
                    surname,
                    city,
                    birth
                })
                newUser.save()
                    .then(async user => {
                        const user_response = {
                            id: user._id,
                            email: user.email,
                            name: user.name,
                            surname: user.surname,
                            city: user.city,
                            birth: user.birth
                        }
                        const accessToken = await jwt.sign(
                            { user_response },
                            process.env.ACCESS_TOKEN_SECRET,
                            { expiresIn: '15m' }
                        )
                        const refreshToken = await jwt.sign(
                            { user_response },
                            process.env.REFRESH_TOKEN_SECRET,
                            { expiresIn: '15d' }
                        )
                        res.cookie('refreshToken', refreshToken, { httpOnly: true })
                        res.status(200).send({
                            msg: "User created.",
                            accessToken,
                            user_response
                        })
                    }).catch(err => {
                        res.status(500).send({ msg: "Database error" })
                    })
            } catch (err) {
                console.log(err)
                res.status(500).send({ msg: "Creating user error" })
            }
        })
})

module.exports = router;

 

Answer 2

Polecam sprawdzone w boju ciastka. Przypominajac, ze w ciachu trzymasz tylko jakis indentyfikator a nie jakiekolwiek wrazliwe dane (identyfikatorem wiazesz te wrazliwe dane z userem). Zdecydowanie sesja (express-session - pamietaj, ze MemoryStore sie NIE nadaje na produkcje, unikaj local storage) + redis i jak pisal @Aisekai Http Only + Secured.