Как добавить пользователей в firebase?

Question

[evg_96]

Текущее состояние:



В модуле auth хранится тот пользователь под которым вошли на сайт.
Добавляется он следующим способом:

case SIGN_IN_SUCCESS: {
  return state
    .set("loading", false)
    .set("user", action.payload.user) // добавление пользователя в состояние из firebase
    .set("error", null);
}

Как теперь сделать так чтобы в состоянии например в модуле users/people хранить всех пользователей которые зарегистрировались? (Нужно чтобы можно было выводить в будущем список всех пользователей, и добавлять данные пользователю, например имя, телефон и т.д, так как изначально у него есть только email). И нужно как то это все организовать как коллекцию пользователей в firebase

Подскажите пожалуйста, а то уже не знаю как двигаться дальше, ступор

Answer 1

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

Работал с firebase и помню что делал так

const authenticateWithEmailAndPassword = (email, password) => {
    // console.log('authenticateWithEmailAndPassword',email, password)
    return dispatch => {
        dispatch({type: types.START_LOGIN});
        firebaseAuth.signInWithEmailAndPassword(email, password)
            .then(result => {
               //Здесь вы ложите email и пасс  пользователя  в users/people/id данного пользователя 
                dispatch(signInEmailPasswordSuccess(result))
            })
            .catch(error => {
                dispatch(signInError(error))
            });
    }
}

И в необходимый момент вы сможете взять всех пользователей из users/people/

Comments

[evg_96]

Роман Александрович Ну это авторизация, это у меня сделано. Также сделана регистрация. Пользователи добавляются в firebase. Там у них получается из полезного только email. Мне же нужно как то хранить этих пользователей в БД firebase, например в коллекции users. Чтобы можно было добавлять им новые поля, такие как имя, телефон и т.д, после того как пользователь заполнит свой профиль на сайте например.
Проблемы бы не было, если бы пользователи после регистрации сохранялись сразу в БД, а не куда то там еще .

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

evg_96, я вам и говорю что вместе с полезной информацией возвращается его уникальный id.
Вы в базе при регистрации сохраняете например users/id его нужню вам информацию а затем он заполняет например о себе вот так aboutMe/id данные. и в users и в aboutMe id будет одинаковый.
если ж вы не знаете какой же у вас щас пользователь авторизован и какой у него id
var user = firebase.auth().currentUser;

[evg_96]

Роман Александрович, Так мне нужен список всех пользователей. Я не понимаю как можно изменить пользоватлю данные, если он не находится в БД. Они хранятся где то в другом месте, а не в основной БД.

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

evg_96, показывайте вашу регистрацию!

[evg_96]

Роман Александрович,
Вот вся "утка" связанная с пользователем.

import { appName } from "../config";
import firebase from "firebase";
import { Record } from "immutable";
import { all, take, apply, takeEvery, put, call } from "redux-saga/effects";
import { replace } from "react-router-redux";
import { eventChannel } from "redux-saga";

const ReducerRecord = Record({
  user: null,
  error: null,
  loading: false
});


export const moduleName = "auth";

export const SIGN_UP_REQUEST = `${appName}/${moduleName}/SIGN_UP_REQUEST`;
export const SIGN_UP_SUCCESS = `${appName}/${moduleName}/SIGN_UP_SUCCESS`;
export const SIGN_UP_ERROR = `${appName}/${moduleName}/SIGN_UP_ERROR`;

export const SIGN_IN_REQUEST = `${appName}/${moduleName}/SIGN_IN_REQUEST`;
export const SIGN_IN_SUCCESS = `${appName}/${moduleName}/SIGN_IN_SUCCESS`;
export const SIGN_IN_ERROR = `${appName}/${moduleName}/SIGN_IN_ERROR`;

export const SIGN_OUT_REQUEST = `${appName}/${moduleName}/SIGN_OUT_REQUEST`;
export const SIGN_OUT_SUCCESS = `${appName}/${moduleName}/SIGN_OUT_SUCCESS`;

export default function authReducer(state = ReducerRecord(), action) {
  const { type } = action;

  switch (type) {
    case SIGN_UP_REQUEST: {
      return state.set("loading", true);
    }

    case SIGN_IN_SUCCESS: {
      return state
        .set("loading", false)
        .set("user", action.payload.user)
        .set("error", null);
    }

    case SIGN_OUT_SUCCESS: {
      return new ReducerRecord();
    }

    default: {
      return state;
    }
  }
}

export function signIn(email, password) {
  return {
    type: SIGN_IN_REQUEST,
    payload: {
      email,
      password
    }
  };
}

export function signUp(email, password) {
  return {
    type: SIGN_UP_REQUEST,
    payload: {
      email,
      password
    }
  };
}

export function signOut() {
  return {
    type: SIGN_OUT_REQUEST
  }
}

export const signInSaga = function * () {
  const auth = firebase.auth();

  const action = yield take(SIGN_IN_REQUEST);
  const user = yield call([auth, auth.signInWithEmailAndPassword], action.payload.email, action.payload.password);

  yield put({
    type: SIGN_IN_SUCCESS,
    payload: user
  });

  yield put(replace("/"));
};

export const signOutSaga = function * () {
  const auth = firebase.auth();

  yield apply(auth, auth.signOut);
}

export const signUpSaga = function * () {
  const auth = firebase.auth();

  while (true) {
    const action = yield take(SIGN_UP_REQUEST);

    try {
      const user = yield call([auth, auth.createUserWithEmailAndPassword], action.payload.email, action.payload.password);

      yield put({
        type: SIGN_UP_SUCCESS,
        payload: {
          user
        }
      });

      yield put(replace("/"));
    } catch (error) {
      yield put({
        type: SIGN_UP_ERROR,
        error
      });
    }
  }
};


const createAuthChannel = () => eventChannel(emit => firebase.auth().onAuthStateChanged(user => emit({ user })))

export const watchStatusChangeSaga = function * () {
    const chan = yield call(createAuthChannel);

    while (true) {
        const { user } = yield take(chan);

        if (user) {
            yield put({
                type: SIGN_IN_SUCCESS,
                payload: { user }
            });
        } else {
            yield put({
                type: SIGN_OUT_SUCCESS,
                payload: { user }
            });

            yield put(replace('/'));
        }
    }
}


export const saga = function * () {
  yield all([
    takeEvery(SIGN_IN_REQUEST, signInSaga),
    takeEvery(SIGN_OUT_REQUEST, signOutSaga),
    signUpSaga(),
    watchStatusChangeSaga()
  ]);
};

В итоге получается состояние выглядит как на приложенном в вопросе скриншоте.
Но хотелось бы еще иметь там отдельный модуль users, где будет находиться коллекция всех пользователей. Так же чтобы эта коллекция была и в БД firebase. Сейчас там только коллекция catalog, которая хранит товары

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

Ясно. Смотрите

function createUserWithEmailAndPassword ({ email, password }) {
  return (dispatch) => {
    firebase.auth().createUserWithEmailAndPassword(email, password)
		.then((success) => {
  alert('User created');
  dispatch({ type: constants.SIGNUP_SUCCESS, payload: { uid: success.uid, email } })



firebase.database().ref('users/' + success.uid).set({
    username: name,
    email: email,
    profile_picture : imageUrl
  });


})

а в тот момент когда вам понадобятся все пользователи

return firebase.database().ref('/users/').once('value').then(function(snapshot) {
  var users = snapshot.val()
});

[evg_96]

Роман Александрович,
После регистрации теперь пользователь добавляется в БД, но теперь не ясно, как сделать так чтобы как бы связать пользователей в firebase с моей коллекцией в БД firebase. У меня сейчас получается что в БД попадают только новые пользователи, а старые как были в тени так и остались. Где и как это можно реализовать?

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

evg_96, старые теперь придется забить руками
у вас в скрине что вы выкладывали есть уникальный идентификатор пользователя
и придется руками скопировать его идентификар создать руками такой айди и руками заполнить майл

[evg_96]

Роман Александрович, получается все равно как то нужно связывать их. Например я изменю в firebase email пользователю, или удалю его вовсе, но изменения не будут отражены в моей коллекции в БД.
Или в дальнейшем просто не трогать пользователей внутри firebase и работать только со своей коллекцией

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

evg_96,

просто не трогать пользователей внутри firebase и работать только со своей коллекцией

Именно. в доке firebase есть все необходимые методы для работы с пользователя.
https://firebase.google.com/docs/auth/web/manage-users

[evg_96]

Роман Александрович, Все вроде бы написал, но теперь не могу понять, как сделать так чтобы после очередной регистрации, пользователь сразу же добавлялся в state-->users? Сейчас список пользователей обновляется после перезагрузки страницы, так как загрузка всех пользователей указана на componentDidMount.

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

evg_96, покажите что вас лежит в componentDidMount. и метод из экшена

[evg_96]

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

componentDidMount() {
  this.props.fetchAllUsers();
}

export const fetchAllUsersSaga = function * () {
  const ref = firebase.database().ref("users");

  try {
    const data = yield call([ref, ref.once], "value");

    yield put({
      type: FETCH_ALL_SUCCESS,
      payload: data.val()
    });
  } catch (error) {
    // NOP
  }
};

Я сделал сейчас так что просто каждые 2 секунды делается запрос на всех пользователей. Не знаю на сколько это правильно...

export const backgroundSyncSaga = function * () {
  try {
    while (true) {
      yield call(fetchAllUsersSaga);
      yield delay(2000);
    }
  } catch (error) {
    // NOP
  }
};

export const saga = function * () {
  yield fork(backgroundSyncSaga);

  yield all([
    takeEvery(FETCH_ALL_REQUEST, fetchAllUsersSaga),
  ]);
};

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

evg_96, fetchAllUsersSaga вместо once использовать on

[evg_96]

Роман Александрович,
В доках представлен такой пример кода. Не подскажите как переписать на redux-saga тоже самое. При использовании on, нужно передавать callback, и что то не понятно как в таком случае действовать...

ref.on('value', function(dataSnapshot) {
  ...
});

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

evg_96, не использовал сага ни разу

Answer 2

[Максим]

Как теперь сделать так чтобы в состоянии например в модуле users/people хранить всех пользователей которые зарегистрировались

Посмотреть как в firebase получить всех пользователей и в нужный момент, выполнять запрос за ними.
Или тут больше вопрос о том чтобы найти в firebase API нужный метод?

Comments

[evg_96]

Максим Найти нужный метод если он есть, я думаю смогу. Меня интересует как создать коллекцию пользователей из тех которые зарегистрировались. По умолчанию пользователи хранятся где то в firebase, но явно не на прямую в БД как я понял. По крайней мере они отображаются в отдельном списке, в другой вкладке, нежели БД.
Вот я получил пользователей. Затолкал их в стор. Получилось что то типа этого:

users: {
  "[e-mail]": { ... },
  "[e-mail]": { ... },
  "[e-mail]": { ... },
  "[e-mail]": { ... },
}

В итоге пользователи есть в состоянии, можно как манипулировать ими, добавлять им какие то данные, новые поля, но как их потом обратно в БД записать?? нужно же как то хранить их там в отдельной коллекции в БД. Вот в этом и проблема

[Максим]

evg_96, вы же сами себе все лучше меня объяснили, у вас вопрос именно в том, что: как изменить информацию о пользователе в firebase. Следовательно, надо в эту сторону копать. https://firebase.google.com/docs/auth/web/manage-users ( Update a user's profile параграф )

[Максим]

evg_96, еще нашел такое https://firebase.google.com/docs/admin/setup (отсюда: https://stackoverflow.com/questions/38808712/delet... ) - может поможет

[evg_96]

Максим, Вот уже что то ближе к решению. Надеюсь там можно своих поля добавлять.
И остается вопрос в том как конкретно это все реализовать? Сейчас регистрация, авторизация находятся в утке "auth". Как то неправильно будет там же писать и работу с пользователями, но и из другого места не знаю как получить доступ к другому модулю состояния, чтобы работать с пользователем, так как он находится в "auth".
Что то вообще я уже запутался...
Вот хорошо было бы, если бы пользователи изначально в БД сохранялись, никаких проблем не было бы.