Authentication in React Native with AsyncStorage

Question

In my project, when uid is saved in AsyncStorage, it means the user has already logged in.

Current code

Index.js

import React from 'react';
import Auth from 'app/src/common/Auth';
import { Text } from 'react-native';

export default class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     auth: true,
    };
  }

  async componentDidMount() {
    await this.setState({ auth: await Auth.user() });
  }

  render() {
   const { auth } = this.state;
     return (
       {!auth ? (
         <Text>You need to Log In!</Text>
       ) : (
         <Text>You are Logged In!</Text>
       )}
     )
  }
}

Auth.js

import { AsyncStorage } from 'react-native';

export default {
  async user() {
    let result = true;
    const response = await AsyncStorage.getItem('uid');
    if (!response) {
      result = false;
    }
    return result;
  },
};

This code is working but I would like to make this more simple like one function.

I would appreciate it if you could give me any advice.

Omar Berrami · Accepted Answer · 2020-09-01 03:17:40Z

1

You can use promise and Do all Job in Index.js like

AsyncStorage.getItem('uid').then((uid) => {
    this.setState({
        auth : (uid) ? true : false
    })
})

or simply use

const uid = await AsyncStorage.getItem('uid');
this.setState({ auth : (uid) ? true : false  });

answered Sep 1, 2020 at 3:17

Omar Berrami

1771 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt Aft · Accepted Answer · 2020-09-01 03:17:14Z

0

Are you going to be using that in more than one spot? why not just do it in your component?

  async componentDidMount() {
    const auth = await AsyncStorage.getItem('uid');
    this.setState({ auth });
  }

answered Sep 1, 2020 at 3:17

Matt Aft

8,9663 gold badges28 silver badges38 bronze badges

3 Comments

Wes Over a year ago

Yes, I'm going to use this in more than one spot.

Matt Aft Over a year ago

are you using any global state management like redux? because then you can fetch it once here and grab the value from redux in any other component you need it

Wes Over a year ago

I'm not using redux. Thanks, looks like there are better ways than my current one.

Collectives™ on Stack Overflow

Authentication in React Native with AsyncStorage

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related