After I log out with a user and then log in with another, the data of the last user persists in the main screen, I need for that Main screen to refresh after another user logs-in.
How is it possible to do that?
this is in my componentDidMount()
async componentDidMount() {
await Font.loadAsync({
'AbhayaLibre-Regular': require('../assets/fonts/AbhayaLibre-Regular.ttf'),
'AbhayaLibre-Bold': require('../assets/fonts/AbhayaLibre-Bold.ttf'),
});
this.setState({ fontLoaded: true });
this.authCheck()
if (this.state.loggedIn == "false") {
this.props.navigation.navigate("Login");
} else {
this.authUser();
this.fetchSubjects();
}
}
It puzzles me because I'm not sure how to run that code again AFTER a new user logs-in after another logged out.
Code snipped of the login:
<Button icon="send" mode="contained" text="#1ebc61" color="white" onPress={() => {
axios.post('http://homewrk.test/api/auth/login', {
email: this.state.email,
password: this.state.password
}).then(res => {
this.setState({ token: res.data.access_token });
this.storeKey();
this.props.navigation.navigate("Home");
}).catch(() => {
this.setState({ error: true })
})
}}>
authCheck()
async authCheck() {
const token = await AsyncStorage.getItem('access');
const access = 'Bearer ' + token;
console.log(access);
axios.get(`http://homewrk.test/api/check`, {
headers: {
'Authorization': access,
}
}).then(res => {
const isLoggedIn = res.data;
this.setState({ loggedIn: isLoggedIn });
})
}
storing the key:
storeKey = async () => {
try {
await AsyncStorage.setItem('access', this.state.token);
console.log("done");
} catch (e) {
console.log(e);
}
}
async componentDidMount() {
await Font.loadAsync({
'AbhayaLibre-Regular': require('../assets/fonts/AbhayaLibre-Regular.ttf'),
'AbhayaLibre-Bold': require('../assets/fonts/AbhayaLibre-Bold.ttf'),
});
this.focusListener = this.props.navigation.addListener("willFocus", () => {
this.authCheck()
if (this.state.loggedIn == "false") {
this.props.navigation.navigate("Login");
} else {
this.authUser();
this.fetchSubjects();
}
});
}
componentWillUnmount() {
this.focusListener.remove();
}
Related
I'm having an issue implementing SSO with AWS Amplify into my React Native app. I have SSO working fine, however, when trying to put the cognito user object in my authentication context, Hub.listen calls a signout and the user is immediately signed out.
Here is my code where user is signed up:
SignUp.js
...
useEffect(() => {
const unsubscribe = Hub.listen("auth", ({ payload: { event, data } }) => {
console.log("event", event);
console.log("data", data);
switch (event) {
case "signIn":
console.log("data from signup: ",data)
setUserInContext(data);
break;
case "signOut":
setUserInContext(null);
break;
case "customOAuthState":
setCustomState(data);
}
})
return unsubscribe;
}, []);
...
return (
...
<Button
onPress={() => Auth.federatedSignIn({provider: "Google"})}
>
Google
</Button>
...
)
This code properly opens the google consent screen and allows me to select a user to login with. In fact, if I don't send the returned user object from the to the context like setUserInContext(data) in the above code, I get the user and everything works. However, sending this data to my context seems to cause Hub.listen to detect or invoke the oauth signout, even if I add something like this:
...
const [authUser,setAuthUser] = useState(null)
useEffect(() => {
const unsubscribe = Hub.listen("auth", ({ payload: { event, data } }) => {
console.log("event", event);
console.log("data", data);
switch (event) {
case "signIn":
console.log("data from signup: ",data)
setAuthUser(data);
break;
case "signOut":
setAuthUser(null);
break;
case "customOAuthState":
setCustomState(data);
}
})
return unsubscribe;
}, []);
useEffect(() => {
if (authUser) {
console.log("authuser activated")
loginWithGoogle(authUser)
}
},[authUser])
...
return (
...
<Button
onPress={() => Auth.federatedSignIn({provider: "Google"})}
>
Google
</Button>
...
)
Below is my code for my authentication context:
export const UserProvider = ({ children }) => {
const [user, setUser] = useState(null);
useEffect(() => {
Auth.currentAuthenticatedUser()
.then(user => {
//fetchUserData(user).catch(err => console.error(err));
console.log("currentauthenticateduser: ",user)
setUser(user);
})
.catch((err) => {
console.log("no user found: ",user,"\nerr: ",err)
setUser(null)
});
},[]);
const login = (usernameOrEmail, password) =>
Auth.signIn(usernameOrEmail, password)
.then(cognitoUser => {
setUser(cognitoUser);
return cognitoUser;
})
.catch((err) => {
if (err.code === 'UserNotFoundException') {
err.message = 'Invalid username or password';
}
throw err;
}
);
const loginWithGoogle = (cognitoUser) => {
console.log("setting user: ",cognitoUser)
setUser(cognitoUser)
}
const logout = () =>
console.log("logout called")
Auth.signOut()
.then(data => {
setUser(null);
return data;
}
);
const deleteUser = async () => {
try {
const result = await Auth.deleteUser();
console.log(result);
} catch (err) {
console.log("Error deleting user", err);
} finally {
setUser(null);
}
}
const values = useMemo(() => ({
user,
loginWithGoogle,
login,
logout,
deleteUser
}), [user]);
return (
<UserContext.Provider value={values}>{children}</UserContext.Provider>
)
}
export const useUser = () => {
const context = useContext(UserContext);
if (context === undefined) {
throw new Error('`useUser` must be within a `UserProvider` component');
}
return context;
};
Please send help
auth(){} is to send request to the server. For, authentication ,login and signUp url is different. So I use two actions to assign the url by mode "login/signUp". then "login" and "signUp" will dispatch auth(){}
In the past, I directly put send request function fetch () in login() / signUp(). when error throw out ,I can catch it by use try {} catch{}.
Now, I want to reduct the duplicated code . The problem is , the error will be throw out by auth(), in Vue3 component, what I dispatch is not auth(), it is login() / signUp().
How can I get the error? will it be possible to pass the error through login()/signUp(),then I can get it ?
updated:
auth.vue
async setUser() {
if (this.mode === "sign up") {
if (this.emailIsValid === true && this.passwordsIsValid === true) {
const payload = {
email: this.email,
password: this.password,
};
await this.$store.dispatch("homepage/signUp", payload);
}
} else if (this.mode === "login") {
if (this.emailIsValid === true && this.passwordsIsValid === true) {
this.isLoading = true;
const payload = {
email: this.email,
password: this.password,
};
try {
await this.$store.dispatch("homepage/login", payload);
} catch (err) {
this.isLoading = false;
// console.log(err);
this.error = err.message || "something went wrong";
}
}
}
},
Vuex actions.js
async signUp (context, payload) {
context.dispatch('auth', {
...payload,
mode: 'sign up'
})
},
async login (context, payload) {
await context.dispatch('auth', {
...payload,
mode: 'login'
})
},
async auth (context, payload) {
let url = ''
if (payload.mode === 'sign up') {
url =
'https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=[api key]'
} else if (payload.mode === 'login') {
url =
'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=[api key]'
}
const res = await fetch(url, {
method: 'POST',
body: JSON.stringify({
email: payload.email,
password: payload.password,
returnSecureToken: true
})
})
const resData = await res.json()
if (!res.ok) {
// console.log(resData)
const error = new Error(resData.error.message || 'Try again later ')
throw error
}
}
}
just pass error the bridge action .
add another try{} catch {}
vuex actions.js
async login (context, payload) {
try {
await context.dispatch('auth', {
...payload,
mode: 'login'
})
} catch (err) {
throw err
}
}
I am new to react native and trying to save user obejct in application storage using await AsyncStorage.setItem('user', res[1].data); However I am getting error as
handleLogin = async() => {
NetInfo.fetch().then(state => {
if (state.isConnected) {
const {navigate} = this.props.navigation;
const data = {
email: this.state.userName,
password: this.state.password
};
fetch(`${DOMAIN_URL}/login`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
})
.then((response) => {
const statusCode = response.status.toString();
const data = response.json();
return Promise.all([statusCode, data]);
})
.then((res) => {
if (res[0] == 200) {
await AsyncStorage.setItem('user', res[1].data);
navigate('Home');
}else{
Alert.alert(
res[1].message
);
}
})
.catch((error) => {
console.error(error);
});
}
else {
Alert.alert(
"No Internet!",
"Needs to connect to the internet in order to work. Please connect tablet to wifi and try again.",
[
{
text: "OK",
onPress: () => { }
}
]
);
};
})
};
I have made the handleLogin async but it doesn't solve the error. What is the correct way to store user obejct?
It is recommended that you use react-native-easy-app , through which you can access any data in AsyncStorage synchronously.
Sample_Hooks
StorageController
navigateToHome = async (user) => {
const { navigate } = this.props.navigation;
await AsyncStorage.setItem('user', user);
navigate('Home');
}
handleLogin = async() => {
NetInfo.fetch().then(state => {
if (state.isConnected) {
const data = {
email: this.state.userName,
password: this.state.password
};
fetch(`${DOMAIN_URL}/login`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
})
.then((response) => {
const statusCode = response.status.toString();
const data = response.json();
return Promise.all([statusCode, data]);
})
.then((res) => {
if (res[0] == 200) {
navigateToHome(res[1].data);
}else{
Alert.alert(
res[1].message
);
}
})
.catch((error) => {
console.error(error);
});
}
else {
Alert.alert(
"No Internet!",
"Needs to connect to the internet in order to work. Please connect tablet to wifi and try again.",
[
{
text: "OK",
onPress: () => { }
}
]
);
};
})
};
Good day! I have this function of AsyncStorage that gets an item of a token. I used with ApolloClient to process the token but when I test it first, it seems to have an error with what will I get by AsyncStorage function.
export function jwtLogin(data) {
return async dispatch => {
const userData = {
email: data.email,
password: data.password,
};
console.log(userData);
const client = new ApolloClient({
link: new HttpLink({
uri: API_URL,
}),
cache: new InMemoryCache(),
});
client
.mutate({
mutation: loginUser,
variables: {
email: userData.email,
password: userData.password,
},
})
.then(resp => {
console.log(resp.data.tokenCreate);
console.log('Token', resp.data.tokenCreate.token);
if (resp.data.tokenCreate.token !== null) {
saveJWTTokenData(resp.data.tokenCreate.token); //from AsyncStorage save function
async function main() { //function of AsyncStorage
await AsyncStorage.getItem('jwt_token').then(item => {
return item;
});
}
console.log(main()); // returns error
Actions.push('main_loading');
} else {
const errors = resp.data.tokenCreate.errors;
{
errors.map(err => {
Alert.alert('Error.', err.message);
});
}
}
})
.catch(err => {
Alert.alert('Error.', err.message);
});
};
}
For the save storage function:
export const saveJWTTokenData = async jwt_token => AsyncStorage.setItem('jwt_token', jwt_token);
My Error Log Picture
I think your Promise is not handled correctly..
Try to add a catch after your then call like this:
.catch(err => console.log(err))
Or try to use your function like this maybe:
await getData("jwt_token")
.then(data => data)
.then(value => this.setState({ token: value })) // here it is setState but I guess you can also return
.catch(err => console.log("AsyncStorageErr: " + err));
I am using React Native with Expo, and I am able to create users + rooms and send messages to them with the following code:
const hooks = {
onMessage: message => {
console.log("message", message);
this.setState({
messages: [...this.state.messages, message]
});
},
onUserStartedTyping: user => {
this.setState({
usersWhoAreTyping: [...this.state.usersWhoAreTyping, user.name]
});
},
onUserStoppedTyping: user => {
this.setState({
usersWhoAreTyping: this.state.usersWhoAreTyping.filter(
username => username !== user.name
)
});
},
onPresenceChange: () => this.forceUpdate()
};
class SetupChatKit extends React.Component {
constructor(props) {
super(props);
this.state = {
chatManager: null,
currentUser: {},
currentRoom: {},
messages: [],
usersWhoAreTyping: []
};
}
componentDidMount() {
const { userId, name } = this.props;
this.instantiateChatManager(userId);
this.createChatKitUser({ userId, name });
}
joinOrCreateChatKitRoom = (mode, chatKitRoomId, title) => {
const { chatManager } = this.state;
return chatManager
.connect()
.then(currentUser => {
this.setState({ currentUser });
if (mode === "join") {
return currentUser.joinRoom({ roomId: chatKitRoomId, hooks });
}
return currentUser.createRoom({
name: title,
private: false,
hooks
});
})
.then(currentRoom => {
this.setState({ currentRoom });
return currentRoom.id;
})
.catch(error => console.error("error", error));
};
instantiateChatManager = userId => {
const chatManager = new Chatkit.ChatManager({
instanceLocator: "v1:us1:9c8d8a28-7103-40cf-bbe4-727eb1a2b598",
userId,
tokenProvider: new Chatkit.TokenProvider({
url: `http://${baseUrl}:3000/api/authenticate`
})
});
this.setState({ chatManager });
};
My problem is that console.log("message", message); never gets called, even when I manually add messages to the room via the online control panel.
I've tried logging from chatManager, and that looks like the following:
As you can see from the documentation, the onMessage hook needs to be attached on subscribeRoom, not when joining a room.
https://docs.pusher.com/chatkit/reference/javascript#connection-hooks
So probably add subscribeToRoom() after the first success promise in your joinOrCreateChatKitRoom() method.
I refactored the code with async/await and used .subscribetoRoom() like so:
joinOrCreateChatKitRoom = async (mode, chatKitRoomId, title) => {
const { chatManager } = this.state;
try {
const currentUser = await chatManager.connect();
this.setState({ currentUser });
let currentRoom;
if (mode === "join") {
currentRoom = await currentUser.joinRoom({
roomId: chatKitRoomId
});
} else {
currentRoom = await currentUser.createRoom({
name: title,
private: false
});
}
this.setState({ currentRoom });
await currentUser.subscribeToRoom({
roomId: currentRoom.id,
hooks: {
onMessage: message => {
this.setState({
messages: [...this.state.messages, message]
});
},
onUserStartedTyping: user => {
this.setState({
usersWhoAreTyping: [...this.state.usersWhoAreTyping, user.name]
});
},
onUserStoppedTyping: user => {
this.setState({
usersWhoAreTyping: this.state.usersWhoAreTyping.filter(
username => username !== user.name
)
});
},
onPresenceChange: () => this.forceUpdate()
}
});
return currentRoom.id;
} catch (error) {
console.error("error creating chatManager", error);
}
};