Hello, this is my first time embarking on a React Native project, and I am still relatively new to developing as a whole, forgive me for my brevity.
I am also using Typescript for my project, so I have modified some of the code from the guides for it.
I am trying to integrate Auth0 login into my app, at first I followed the set-up guide from the react-native-auth0 Documentation. After clicking on the Login button, it correctly redirects me to the universal login page, but after logging in it simply returns back to my Landing page instead of Home, and I realized that the [user] object was null.
Then, I’ve tried following this guide here: Get Started with Auth0 Authentication in React Native Android Apps. The same issue occurs, and I’ve caught the error after running auth0.webAuth.authorize, which returned a Timeout error.
Here is the code I tried for the context:
import React, {useState, useEffect, FC, useContext} from 'react';
import {REACT_APP_AUTH0_DOMAIN, REACT_APP_AUTH0_CLIENT_ID} from '@env';
import SInfo from 'react-native-sensitive-info';
import Auth0 from 'react-native-auth0';
import jwtDecode from 'jwt-decode';
const auth0 = new Auth0({
domain: REACT_APP_AUTH0_DOMAIN,
clientId: REACT_APP_AUTH0_CLIENT_ID,
});
export interface IAuth {
loading: boolean;
loggedIn: boolean | null;
login: () => Promise<void>;
logout: () => Promise<void>;
userData: {
name: string;
picture: string;
} | null;
}
const AuthContext = React.createContext<IAuth | null>(null);
export const useAuthContext = () => {
const val = useContext(AuthContext);
if (val === null) {
throw new Error('AuthContext used outside of provider!');
}
return val;
};
export const AuthContextProvider = (props: any) => {
const [loading, setLoading] = useState(true);
const [loggedIn, setLoggedIn] = useState<boolean | null>(null);
const [userData, setUserData] = useState<{
name: string;
picture: string;
} | null>(null);
const getUserData = async (id?: string) => {
const idToken = id ? id : await SInfo.getItem('idToken', {});
type customJwtPayload = {name: string; picture: string; exp: number};
const {name, picture, exp} = jwtDecode<customJwtPayload>(idToken);
if (exp < Date.now() / 1000) {
throw new Error('ID token expired!');
}
return {
name,
picture,
};
};
useEffect(() => {
(async () => {
try {
const user_data = await getUserData();
if (user_data) {
setLoggedIn(true);
setUserData(user_data);
}
} catch (err) {
setLoggedIn(false);
}
})();
}, []);
// Executed just after the user logs in
useEffect(() => {
(async () => {
try {
if (loggedIn) {
const user_data = await getUserData();
if (user_data) {
setLoggedIn(true);
setUserData(user_data);
}
}
} catch (err) {
alert(`Error logging in use effect ${err}`);
}
})();
}, [loggedIn]);
const login = async () => {
try {
const credentials = await auth0.webAuth.authorize({
scope: 'openid email profile',
});
await SInfo.setItem('idToken', credentials.idToken, {});
const user_data = await getUserData(credentials.idToken);
setLoggedIn(true);
setUserData(user_data);
} catch (err) {
alert(`Error logging in ${err}`);
}
};
const logout = async () => {
try {
await auth0.webAuth.clearSession({});
await SInfo.deleteItem('idToken', {});
setLoggedIn(false);
setUserData(null);
} catch (err) {
alert(`Error logging out ${err}`);
}
};
const value = {
loading,
loggedIn,
login,
logout,
userData,
};
return (
<AuthContext.Provider value={value}>{props.children}</AuthContext.Provider>
);
};
Many thanks in advance.