Understanding Secure Storage

#1

Hello

Can somebody help me with this topic please?

import React, { Component } from 'react';
import {Image, Text, TouchableOpacity, View, Platform} from "react-native";
import {clientsIdArray, testClintIdArray} from '../constants/clientIDs'
import {styles} from "../styles/GoogleButtonStyle";
import I18n from 'ex-react-native-i18n'
import Expo from "expo";


const osName = Platform.OS;
const osVersion = Platform.Version;
const deviceId = Expo.Constants.deviceId;
const deviceName = Expo.Constants.deviceName;
let createTokenController = 'https://rony-dot-forigotron.appspot.com/token/create';


export default class CreateTokenIdController extends Component {

    static navigationOptions = {
        title: 'ToogleBoard'
    };

    constructor(props) {
        super(props);
        this.state = {
            appIsReady: false,
            jwt: ''
        }
    }

    async componentWillMount() {
        await I18n.initAsync();
        this.setState({appIsReady: true});
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity style={styles.GooglePlusStyle} activeOpacity={0.5}
                                  onPress={signInWithGoogleAsync.bind(this)}>
                    <Image
                        source={require('../assets/googleBtn.png')}
                    />
                    <Text style={styles.TextStyle}>Login Using Google</Text>
                </TouchableOpacity>
            </View>
        );
    }
}


    async function signInWithGoogleAsync() {
    try {
        const result = await Expo.Google.logInAsync({
            androidClientId: testClintIdArray[0],
            iosClientId: testClintIdArray[1],

            // Will have package name com.ispcloudservices.toogleboard.mobile
            androidStandaloneAppClientId: clientsIdArray[0],
            iosStandaloneAppClientId: clientsIdArray[1],

            webClientId: clientsIdArray[2],
            scopes: ['profile', 'email'],
        });

        if (result.type === 'success') {

            let responseJson = {
                'domainName': 'ispcloudservices.com',
                'userEmail': result.user.email,
                'userToken': result.accessToken,
                'userName': result.user.name,
                'osName': osName,
                'osVersion': osVersion,
                'deviceId': deviceId,
                'deviceName': deviceName,
                'langId': I18n.locale
            };

            let formBody = [];
            for (let property in responseJson) {
                let encodedKey = encodeURIComponent(property);
                let encodedValue = encodeURIComponent(responseJson[property]);
                formBody.push(encodedKey + "=" + encodedValue);
            }
            formBody = formBody.join("&");

            let postData = {
                method: 'POST',
                headers: {
                    'User-Agent': 'ToogleBoard',
                    'referer': 'https://toogleboxmobile.com',
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                },
                body: formBody
            };

            fetch(createTokenController, postData)
                .then((response) => response.json())
                .then((responseJson) => {
                    this.setState({jwt: JSON.parse(responseJson.response).tokenId})
                    Expo.setItemAsync('key', this.state.jwt);

                })
        } else {
            return {cancelled: true};
        }
    } catch (e) {
        return {error: true};
    }
}

As you can tell, I am login to google perfectly and generating the jwt (Json wet token), but I need to save that in secure storage. What I am trying to do is check the storage to see if I have the token if I do I present my other screen

0 Likes

#2

I am having problems, I managed to saved the jwt, but I can retrieve in on the other side

This is my Home

``
`import React, { Component } from ‘react’;
import {Image, Text, TouchableOpacity, View, Platform} from “react-native”;
import {clientsIdArray, testClintIdArray} from ‘…/constants/clientIDs’
import {styles} from “…/styles/GoogleButtonStyle”;
import I18n from ‘ex-react-native-i18n’
import Expo from “expo”;

const osName = Platform.OS;
const osVersion = Platform.Version;
const deviceId = Expo.Constants.deviceId;
const deviceName = Expo.Constants.deviceName;
let createTokenController = ‘https://rony-dot-forigotron.appspot.com/token/create’;

export default class CreateTokenIdController extends Component {

static navigationOptions = {
    title: 'ToogleBoard'
};

constructor(props) {
    super(props);
    this.state = {
        appIsReady: false,
        jwt: ''
    }
}

async componentWillMount() {
    await I18n.initAsync();
    this.setState({appIsReady: true});
}

render() {
    return (
        <View style={styles.container}>
            <TouchableOpacity style={styles.GooglePlusStyle} activeOpacity={0.5}
                              onPress={signInWithGoogleAsync.bind(this)}>
                <Image
                    source={require('../assets/googleBtn.png')}
                />
                <Text style={styles.TextStyle}>Login Using Google</Text>
            </TouchableOpacity>
        </View>
    );
}

}

async function signInWithGoogleAsync() {
try {
    const result = await Expo.Google.logInAsync({
        androidClientId: testClintIdArray[0],
        iosClientId: testClintIdArray[1],

        // Will have package name com.ispcloudservices.toogleboard.mobile
        androidStandaloneAppClientId: clientsIdArray[0],
        iosStandaloneAppClientId: clientsIdArray[1],

        webClientId: clientsIdArray[2],
        scopes: ['profile', 'email'],
    });

    if (result.type === 'success') {

        let responseJson = {
            'domainName': 'ispcloudservices.com',
            'userEmail': result.user.email,
            'userToken': result.accessToken,
            'userName': result.user.name,
            'osName': osName,
            'osVersion': osVersion,
            'deviceId': deviceId,
            'deviceName': deviceName,
            'langId': I18n.locale
        };

        let formBody = [];
        for (let property in responseJson) {
            let encodedKey = encodeURIComponent(property);
            let encodedValue = encodeURIComponent(responseJson[property]);
            formBody.push(encodedKey + "=" + encodedValue);
        }
        formBody = formBody.join("&");

        let postData = {
            method: 'POST',
            headers: {
                'User-Agent': 'ToogleBoard',
                'referer': 'https://toogleboxmobile.com',
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            },
            body: formBody
        };

        fetch(createTokenController, postData)
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({jwt: JSON.parse(responseJson.response).tokenId});
                Expo.SecureStore.setItemAsync('id', this.state.jwt);
                this.props.navigation.navigate('Details')

            })
    } else {
        return {cancelled: true};
    }
} catch (e) {
    return {error: true};
}

}


**Details**

import React, {Component} from 'react';
import {Image, Text, TouchableOpacity, View, Platform, WebView} from "react-native";
import I18n from 'ex-react-native-i18n'
import {styles} from "../styles/GoogleButtonStyle";
import Expo from "expo";
import { DangerZone } from 'expo';
const { Localization } = DangerZone;


let viewBulletinBoard = ' https://rony-dot-forigotron.appspot.com/viewbulletinboard/getNote';

export default class ViewBulletinBoard extends Component {

    constructor(props) {
        super(props);
        this.state = {
            appIsReady: false,
            jwt: '',
            response: ''
        }
    }

    async componentWillMount() {
        await I18n.initAsync();
        this.setState({appIsReady: true});
        this._get;
        await getNote()

    }

    render() {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            </View>
        );
    }

    _get = async () => {
        let result = Expo.SecureStore.getItemAsync('id');
        this.setState({jwt: result})
    };
}


    async function getNote() {

        let data = {
            'langId': I18n.locale,
            'countryId': Expo.DangerZone.Localization.getCurrentDeviceCountryAsync()
        };



        let formBody = [];
        for (let property in data) {
            let encodedKey = encodeURIComponent(property);
            let encodedValue = encodeURIComponent(data[property]);
            formBody.push(encodedKey + "=" + encodedValue);
        }
        formBody = formBody.join("&");

        let postData = {
            method: 'GET',
            headers: {
                'User-Agent': 'ToogleBoard',
                "Authorization": "Bearer" + this.state.jwt
            },
            body: formBody
        };

        fetch(viewBulletinBoard, postData)
            .then((response) => response.json())
            .then((responseJson) => {
                console.log(responseJson)
                this.setState({response: responseJson})

            })
        }
0 Likes

#3

Hi-

There’s a lot of code here and its going to be hard to figure out what your problem is by just reading it.

Can you try to put this code into a Snack?
That would be the easiest way to try to help you.

https://snack.expo.io/

0 Likes

#4

Yes is there my friend

I am as ED

0 Likes

closed #5

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.

0 Likes