尝试将Okta身份验证添加到React Native应用程序时出错

时间:2019-03-30 06:02:48

标签: javascript reactjs react-native expo

我正在尝试使用Snack上的Okta API向我的react native应用程序添加登录/注销,但是出现以下错误:

  

[设备]找不到模块“。”评估   module://@okta/okta-react-native.js评估   module://api/TokenClient.js.js评估模块://App.js.js
  加载模块://App.js

TokenClient.js的代码是这样的:

import TokenClient from '@okta/okta-react-native';

var tc = new TokenClient({
  issuer: 'https://XXXXXXXXX.okta.com/oauth2/default',
  client_id: 'XXXXXXXXXXXXXXXXX',
  scope: 'openid profile',
  redirect_uri: __DEV__
    ? 'exp://localhost:19000/+expo-auth-session'
    : 'com.okta.XXXXXXXXX:/callback',
});

export default tc;

我在App.js中像这样使用它:

import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { Constants } from 'expo';
import { Card } from 'react-native-paper';

import tokenClient from './api/TokenClient';

export default class App extends React.Component {
  state = {
    authentication: false,
  };

  checkAuthentication = async () => {
    const { authentication } = this.state;
    const authenticated = await tokenClient.isAuthenticated();
    if (authenticated !== authentication) {
      this.setState({ authentication: authenticated });
    }
  };

  async componentDidMount() {
    await this.checkAuthentication();
  }

  logIn = async () => {
    await tokenClient
      .signInWithRedirect()
      .then(res => {
        console.log('Success', res);
      })
      .catch(err => {
        console.log('Error', err);
      });
    this.checkAuthentication();
  };

  logOut = async () => {
    await tokenClient.signOut();
    this.checkAuthentication();
  };

  render() {
    const { authentication } = this.state;
    return (
      <View style={styles.container}>
        {authentication ? (
          <View>
            <Text style={styles.paragraph}>Welcome!</Text>
            <Button
              title="Sign Out"
              onPress={async () => {
                this.logOut();
              }}
            />
          </View>
        ) : (
          <View style={{ padding: 100 }}>
            <Button
              title="Sign In"
              onPress={async () => {
                this.logIn();
              }}
            />
          </View>
        )}
        <Card>
          <AssetExample />
        </Card>
      </View>
    );
  }
}

0 个答案:

没有答案