How to pass more than one value to the value attribute?

Question

I am working with user authentication, I have created two types of users within the same context, the common user and the admin user, both are registering, logging and loaning. I’m having a hard time returning results within Authcontext.Provider, as value apparently accepts a single value.

Here is my code:

import React, { useState, createContext, useEffect } from 'react';
import firebase from '../services/firebaseConection'
import AsyncStorage from '@react-native-community/async-storage';

export const AuthContext = createContext({});

function AuthProvider({ children }){
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(()=> {
       async function loadStorage(){
           const storageUser = await AsyncStorage.getItem('Auth_user');

           if(storageUser){
               setUser(JSON.parse(storageUser));
               setLoading(false);
           }

           setLoading(false);
       }
       
       loadStorage();
    }, []);

    //Funcao para logar o usario
    async function signIn(email, password){
        await firebase.auth().signInWithEmailAndPassword(email,password)
        .then(async (value)=>{
            let uid = value.user.uid;
            await firebase.database().ref('users').child(uid).once('value')
            .then((snapshot)=>{
                let data = {
                  uid: uid,
                  nome: snapshot.val().nome,
                  email: value.user.email,
                };

                setUser(data);
                storageUser(data);
            })
        })
        .catch((error)=> {
            alert(error.code);
        });
    }
    
    //Cadastrar usuario
    async function signUp(email, password, nome){
        await firebase.auth().createUserWithEmailAndPassword(email,password)
        .then(async (value)=>{
            let uid = value.user.uid;
            await firebase.database().ref('users').child(uid).set({
                nome: nome
            })
            .then(()=>{
                let data = {
                    uid: uid,
                    nome: nome,
                    email: value.user.email,
                };
                setUser(data);
                storageUser(data);
            })
        })
        .catch((error)=> {
            alert(error.code);
        });
    }

    //Logar e salvar os dados
    async function storageUser(data){
        await AsyncStorage.setItem('Auth_user', JSON.stringify(data));
    }

    //Deslogar usuário
    async function signOut(){
        await firebase.auth().signOut();
        await AsyncStorage.clear()
        .then( () => {
           setUser(null); 
        })

    }
    /*****************************USUARIO ADMIN******************************/
    
    const [userAdm, setUserAdm] = useState(null);
    const [loadingAdm, setLoadingAdm] = useState(true);

    useEffect(()=> {
       async function loadStorageAdm(){
           const storageUserAdm = await AsyncStorage.getItem('Auth_user');

           if(storageUserAdm){
               setUserAdm(JSON.parse(storageUserAdm));
               setLoadingAdm(false);
           }

           setLoadingAdm(false);
       }
       
       loadStorageAdm();
    }, []);

    //Funcao para logar o usario
    async function signInAdm(email, password){
        await firebase.auth().signInWithEmailAndPassword(email,password)
        .then(async (value)=>{
            let uid = value.user.uid;
            await firebase.database().ref('users').child(uid).once('value')
            .then((snapshot)=>{
                let data = {
                  uid: uid,
                  nome: snapshot.val().nome,
                  cpf: snapshot.val().cpf,
                  setor: snapshot.val().setor,
                  email: value.user.email,
                };

                setUserAdm(data);
                storageUserAdm(data);
            })
        })
        .catch((error)=> {
            alert(error.code);
        });
    }
    
    //Cadastrar usuário Admin
    async function signUpAdm(email, password, nome, cpf, setor){
        await firebase.auth().createUserWithEmailAndPassword(email,password)
        .then(async (value)=>{
            let uid = value.user.uid;
            await firebase.database().ref('users').child(uid).set({
                nome: nome,
                cpf: cpf,
                setor: setor
            })
            .then(()=>{
                let data = {
                    uid: uid,
                    nome: nome,
                    cpf: cpf,
                    setor: setor,
                    email: value.user.email,
                };
                setUserAdm(data);
                storageUserAdm(data);
            })
        })
        .catch((error)=> {
            alert(error.code);
            alert(error)
        });
    }

    //Logar usuario admin e salvar os dados
    async function storageUserAdm(data){
        await AsyncStorage.setItem('Auth_user', JSON.stringify(data));
    }

    //Deslogar usuário admin
    async function signOutAdm(){
        await firebase.auth().signOut();
        await AsyncStorage.clear()
        .then( () => {
           setUserAdm(null); 
        })

    }


    return(
     <AuthContext.Provider value={{ signed: !!user , user, loading, signUp, signIn, signOut } ,
         { signedAdm: !!userAdm, userAdm, loadingAdm, signUpAdm, signInAdm, signOutAdm }
    }>
         {children}
     </AuthContext.Provider>   
    );
}

export default AuthProvider;

I’m having problems in this part, where I try to pass in the value attribute the value of admin user as common user:

return(
     <AuthContext.Provider value={{ signed: !!user , user, loading, signUp, signIn, signOut } ,
         { signedAdm: !!userAdm, userAdm, loadingAdm, signUpAdm, signInAdm, signOutAdm }
    }>
         {children}
     </AuthContext.Provider>   
    );

Is there any way to pass these 2 values at the same value? If yes, please show me how to do

Answer 1

Currently, you are passing the following value to the AuthContext.Provider:

{
  {
    signed: !!user,
    user,
    loading,
    signUp,
    signIn,
    signOut
  }, 
  {
    signedAdm: !!userAdm,
    userAdm,
    loadingAdm,
    signUpAdm,
    signInAdm,
    signOutAdm
  }
}

This value is not a valid JSON since you cannot use dictionaries within a dictionary. However, you can remove the internal dictionaries and place them directly in the external dictionary:

return(
     <AuthContext.Provider value={{
  signed: !!user,
  user,
  loading,
  signUp,
  signIn,
  signOut,
  signedAdm: !!userAdm,
  userAdm,
  loadingAdm,
  signUpAdm,
  signInAdm,
  signOutAdm
}}>
         {children}
     </AuthContext.Provider>   
    );

Use:

const { signUp, signUpAdm } = useContext(AuthContext);