AWS Amplify запоминает вошедшего пользователя в приложение React Native

Я только начал изучать AWS ampify как серверную часть для моего собственного приложения React. Будучи настоящим новичком в использовании сервиса, я хочу, чтобы мое приложение запоминало вошедшего в систему пользователя каждый раз, когда я обновляю эмулятор.

Я знаю из расширенной документации AWS, что могу использовать для этой цели функцию аутентификации currentAuthenticatedUser, но я понятия не имею, как реализовать код, предназначенный для этой цели.

Мое приложение выглядит так:

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AuthTabs from './components/AuthTabs';
import NavigationTab from './components/NavigationTab';

import Amplify, { Auth } from 'aws-amplify';
import AWSConfig from './aws-exports';

Amplify.configure(AWSConfig);

export default class App extends React.Component {
   state = {
   isAuthenticated: false
}

authenticate(isAuthenticated) {
   this.setState({ isAuthenticated })
}

render() {
  if (this.state.isAuthenticated) {
    console.log('Hello', Auth.user.username)
    return(
      <View style={styles.container}>
        <Text style={styles.textStyle}>
          Hello {Auth.user.username}!
        </Text>
        <NavigationTab
          screenProps={
            {authenticate: this.authenticate.bind(this)}
          }
        />
      </View>
    )
  }
  return (
    <View style={styles.container}>
    <AuthTabs
      screenProps={
        {authenticate: this.authenticate.bind(this)}
      }
    />
    </View>
  )
  }
}

Любая помощь приветствуется.


authentication react-native aws-amplify
person Y.Henni    schedule 25.09.2018    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Я использовал это так:

currentUser = () => {
    Auth.currentAuthenticatedUser()
      .then(user => {
        console.log("USER", user);
        this.props.navigation.navigate("App");
      })
      .catch(err => {
        console.log("ERROR", err);
      });
  };

поэтому его можно вызвать в конструкторе при обновлении приложения, и если пользователь аутентифицирован, перейдите на главный экран, но если это не так, оставайтесь на экране входа в систему. Ваше здоровье.

person Andres Felipe    schedule 29.12.2018
comment
Я получаю not authenticated при звонке Auth.currentAuthenticatedUser(). Что я делаю не так? - person David; 11.11.2019
comment
Взгляните на документацию. Этот метод должен вызываться после настройки модуля Auth или после входа пользователя в систему. Это может быть проблемой, но без кода это сложно сказать. - person Andres Felipe; 13.11.2019

arrow_upward
2
arrow_downward

Я тоже придумал похожее решение. Но вместо конструктора я использую метод жизненного цикла componentDidMount () для вызова метода, который я назвал loadApp () < / сильный>.

import React from 'react'
import {
  StyleSheet,
  View,
  ActivityIndicator,
} from 'react-native'

import Auth from '@aws-amplify/auth'

export default class AuthLoadingScreen extends React.Component {
  state = {
    userToken: null
  }
  async componentDidMount () {
    await this.loadApp()
  }
  // Get the logged in users and remember them
  loadApp = async () => {
    await Auth.currentAuthenticatedUser()
    .then(user => {
      this.setState({userToken: user.signInUserSession.accessToken.jwtToken})
    })
    .catch(err => console.log(err))
    this.props.navigation.navigate(this.state.userToken ? 'App' : 'Auth')
  }
  render() {
    return (
      <View style={styles.container}>
        <ActivityIndicator size="large" color="#fff" />
      </View>     
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#aa73b7',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

loadApp () попытается получить токен JWT пользователя, вызвав метод AWS Amplify currentAuthenticatedUser (). Полученный токен затем сохраняется в компоненте state.

Я использовал React Navigation версии 2 для перехода пользователя либо к экрану приложения, либо к экрану стека аутентификации в зависимости от его статуса: вошел в систему или нет.

person Y.Henni    schedule 02.01.2019

arrow_upward
0
arrow_downward

Вот как я справился с этой проблемой:

const currentUserInfo = await Auth.currentUserInfo()

if (currentUserInfo){
  const data = await Auth.currentAuthenticatedUser()
  dispatch({authTypes.FETCH_USER_DATA_SUCCESS, {payload: {user: data}}});
}
person gildniy    schedule 30.07.2020