I'm working on my AuthService for my react-native frontend. I get data from backend for example an access token and then I pass it to my AuthService to store it with expo secure store. It looks like this (authService.js):
import * as SecureStore from "expo-secure-store";
import jwtDecode from "jwt-decode";
export async function storeJwt(jwt) {
await SecureStore.setItemAsync("vpacctok", jwt);
}
export async function getJwt() {
return await SecureStore.getItemAsync("vpacctok");
}
export async function logout() {
return await SecureStore.deleteItemAsync("vpacctok");
}
export async function getCurrentUser() {
try {
const jwt = await SecureStore.getItemAsync("vpacctok");
if (jwt) {
return jwtDecode(jwt);
} else {
return null;
}
} catch {
return null;
}
}
export default {
storeJwt,
logout,
getJwt,
getCurrentUser,
};
In my components I can simply call this functions which returns my user or my jwt:
if (auth.getCurrentUser()) {
navigation.navigate(routes.NEWS_SCREEN);
}
But since I'm working with secure-store from expo I have async functions and auth.getCurrentUser() for example is not returning my user object instead it returns and stupid Promise.
I found solutions to access the data, but only if I use this functions directly inside my components. This is not what I want. I need a AuthService like this, which I can reuse in several components.
How can I solve this? Thank you guys!