Хранение сессии React, Firebase. Как организовать?

Question

[Jura Semenenko]

Пишу учебный проект на React в качестве БД и для авторизации использую Firebase.

Авторизированным пользователям доступен личный кабинет с уникальным для каждого контентом, который должен тянуться из БД.
При перезагрузке страницы приходиться заново логинится. Вот сейчас думаю какие есть варианты организации хранения сессии.
Простой способ, который приходит на ум это хранение в localstorage данных типа:
- isAuth: true/false
а так же уникальный id, который отдает Firebase:
uid: NcefVvDqfHXqrj0IlvzfmLb2

По флагу отрисовывать приватные страницы, по id дергать нужную инфу по пользователю из БД.

Но в таком случае пользователь технически вроде как не залогиненный после перезагрузки страницы...
Какие есть варианты организовать этот процесс?

Заранее спасибо за советы.

Answer 1

[Саша]

Простой способ, который приходит на ум это хранение в localstorage данных типа:
- isAuth: true/false

Так делать не надо, потому что злоумышленик может поставить этот флаг по своему усмотрению (хоть в данном случае это ему ничего и не даст).

а так же уникальный id, который отдает Firebase:
uid: NcefVvDqfHXqrj0IlvzfmLb2

Можно хранить в localstorage только уникальный id и по нему "дергать" информацию. Если id валидный - отдавать контент. Если идентификатор не валидный, отправлять {'status':'unathorized'} и отправлять логинится.

А лучше конечно использовать JWT.

Comments

[Jura Semenenko]

Спасибо за советы! Почитаю еще документацию Firebase. У них по идее должно быть реализовано что-то типа JWT.

Answer 2

[Роман Александрович]

вот авторизация из живого проекта

const logInWithLoagInAndPassword = (login, password, organization, rememberMe) => {
    return dispatch => {
        return fetch(BASE_URL + '?username=' + login + '&password=' + password + '&customer=' + organization + '&remember=' + remember + '&login=Inloggen&ajax=1', {
            method: 'GET',
            headers: {
                "Access-Control-Allow-Origin": "*"
            }
        }).then(response => {
            return response.json();
        }).then(json => {
                if (rememberMe) {
                    localStorage.setItem('sessionid', json.sessionid)
                    localStorage.setItem('auth', JSON.stringify(json))
                } else {
                    //clear localstorage
                }
                dispatch({type: AUTH_SUCCESS, payload: json})
            }
        )


            .catch(error => {
                console.error('error', error)
                dispatch({type: AUTH_ERROR, payload: error})
            });
    }
}

как видите мы после авторизации получаем ответ от сервера в котором есть id сессии который мы и ложим в  localstorage. Дальше при переходе человека на этот же сайт стоит проверка если есть в localstorage id сессии кидаем его на главную если нет то на авторизацию.

Comments

[Jura Semenenko]

Спасибо за совет! Я уже тоже начал на Гитхабе смотреть реализацию других.

[Кирилл Гаврилов]

А разве так можно передавать пароль в GET? И вопрос следующий, можно же самому выставить id сессии, как-то не очень безопасно кажется?

[Роман Александрович]

vseriousv, если у вас горе апи разраб то можно и так передавать GET запрос) Вы думаете что, сможете руками подобрать id сессии?

[Кирилл Гаврилов]

Роман Александрович, Просто вы написали так:

Дальше при переходе человека на этот же сайт стоит проверка если есть в localstorage id сессии кидаем его на главную если нет то на авторизацию.

т.е проверка осуществляется только тем, что существует ли какой-либо id сессии, я и подумал, что как-то не очень надежно)) Понятное дело надо сравнивать id в localStorage с id, который на сервере, если всё ок, то пропускаем пользователя дальше.