Show user info on login - react native - react-native

Question

I have my login working, it logs me in without problems and it enters the screen that I want, but when I want to show the information on the screen of the user that logs in, I have not been able to show the user information on the screen that it should load from database. I have tried to create an interface where I add the names of the fields as they are in the database but when calling them from my screen nothing is loaded
what I need is that when I log in to my screen protectedScreen.ts it shows me the data of the user that logs in
mi db: Tabla : usuarios campos: id, name, email, password, tipo_usuario
AuthContext.ts //where valid and login
import React,{ createContext, useEffect, useReducer } from "react";
import AsyncStorage from '#react-native-async-storage/async-storage';
import { SafeAreaView, StyleSheet, TextInput, View, Alert, TouchableOpacity, Text } from "react-native";
import cafeApi from "../api/cafeApi";
import { LoginData, LoginResponse, RegisterData, Usuarios } from "../interfaces/appinterfaces";
import { authReducer, AuthState } from "./AuthReducer";
type AuthContextProps = {
errorMessage: string;
token: string | null;
user: Usuarios | null;
status: 'checking' | 'authenticated' | 'not-authenticated';
signUp: (RegisterData: RegisterData) => void;
signIn: (loginData : LoginData) => void;
logOut: () => void;
removeError: () => void;
}
const authInicialState: AuthState = {
status:'checking',
token: null,
user: null,
errorMessage:''
}
export const AuthContext = createContext({} as AuthContextProps);
export const AuthProvider = ({children}: any) =>{
const[state, dispatch] = useReducer(authReducer,authInicialState);
useEffect(() =>{
checkToken();
}, [])
const checkToken = async () =>{
const token = await AsyncStorage.getItem('token');
//No token, no autenticado
if (!token) return dispatch({ type:'notAuthenticated'});
//hay token
const resp = await cafeApi.get('/usuarios/middlewares/Auth.php');
if(resp.status !== 200){
return dispatch({type:'notAuthenticated'});
}
await AsyncStorage.setItem('token', resp.data.token)
dispatch({
type: 'signUp',
payload:{
token: resp.data.token,
user: resp.data.usuarios
}
})
}
const signIn = async({correo, password}: LoginData) => {
try {
await fetch('https://www.miweb.com/apiPlooy/usuarios/login.php',
{
method:'POST',
headers:{
'Accept': 'application/json',
'content-Type': 'application/json'
},
body: JSON.stringify({"email":correo, "password" : password})
}).then(res => res.json())
.then(resData => {
if(resData.message == "Ha iniciado sesión correctamente.") {
dispatch({
type: 'signUp',
payload: {
token: resData.token,
user: resData.usuarios
}
});
}else{
Alert.alert(resData.message)
}
});
}catch (error) {
dispatch({type: 'addError',
payload: error.response.data.msg || 'Información incorrecta'})
}
};
return(
<AuthContext.Provider value={{
...state,
signUp,
signIn,
logOut,
removeError,
}}>
{children}
</AuthContext.Provider>
)
}
appinterfaces.ts // where I add the user db fields to be able to show them on the screen when I login
export interface LoginData{
correo: string;
password: string;
}
export interface LoginResponse{
usuarios: Usuarios;
token: string;
}
export interface Usuarios{
tipo_usuario: String;
email: String;
password: String;
name: String
}
ProtectedScreen.ts // This is my screen when I log in and where I want to show some field of my user that I log in but it is not shown.
interface Props extends StackScreenProps<any, any>{}
export const ProtectedScreen = ({navigation}: Props) => {
const {user, token} = useContext(AuthContext);
const {email, password, name, onChange} = useForm({
email:'',
password:'',
name:'',
});
return (
<>
<View style={loginStyles.formContainer}>
<Text>BIENVENIDO
Tipo usuario: {JSON.stringify(user.tipo_usuario, null, 50)}
</Text>
</View>
</>
)
}
code and api: https://github.com/Giovannychvz/react-native
//I add what I have found in case it is of any use I have a project in reactjs and it uses the same api as the react native project and when I log in it loads the data of the user who logged in, I don't know if it is of any use but I send the context of react:
Note: the only strange thing I found in this context of react is that user-info.php is being called and I am not calling this file from react native because the problem must be there but I have not been able to solve it.
context.js
import React, { createContext,Component } from "react";
import axios from 'axios'
import history from '../components/history';
export const MyContext = createContext();
// Define the base URL
const Axios = axios.create({
baseURL: 'https://www.miweb.com/apiPlooy/usuarios/',
});
class MyContextProvider extends Component{
constructor(){
super();
this.isLoggedIn();
history.push('/');
}
// Root State
state = {
showLogin:true,
isAuth:false,
theUser:null,
}
// Toggle between Login & Signup page
toggleNav = () => {
const showLogin = !this.state.showLogin;
this.setState({
...this.state,
showLogin
})
}
// On Click the Log out button
logoutUser = () => {
localStorage.removeItem('loginToken');
localStorage.clear();
history.push('/');
this.setState({
...this.state,
isAuth:false
})
}
registerUser = async (user) => {
// Sending the user registration request
const register = await Axios.post('register.php',{
name:user.name,
email:user.email,
password:user.password
});
return register.data;
}
loginUser = async (user) => {
// Sending the user Login request
const login = await Axios.post('login.php',{
email:user.email,
password:user.password
});
return login.data;
}
// Checking user logged in or not
isLoggedIn = async () => {
const loginToken = localStorage.getItem('loginToken');
// If inside the local-storage has the JWT token
if(loginToken){
//Adding JWT token to axios default header
Axios.defaults.headers.common['Authorization'] = 'bearer '+loginToken;
// Fetching the user information
const {data} = await Axios.get('user-info.php');
// If user information is successfully received
if(data.success && data.user){
this.setState({
...this.state,
isAuth:true,
theUser:data.user
});
}
}
}
render(){
const contextValue = {
rootState:this.state,
toggleNav:this.toggleNav,
isLoggedIn:this.isLoggedIn,
registerUser:this.registerUser,
loginUser:this.loginUser,
logoutUser:this.logoutUser
}
return(
<MyContext.Provider value={contextValue}>
{this.props.children}
</MyContext.Provider>
)
}
}
export default MyContextProvider;