Lock.show callback not firing after first login.

[martwetzels]

After the first login attempt callback does not get fired. The second time works fine. It's a similar problem as in #32. Inserted the optional methods in AppDelegate (https://auth0.com/docs/quickstart/native/react-native-ios#optional-twitter-facebook-native-login) although Auth0 user-pass is used.

import React, { Component } from 'react'
import {
  Text,
  StyleSheet,
  View,
  Image,
  TouchableHighlight,
  Navigator } from 'react-native'
import { connect } from 'react-redux';
import Auth0Lock from 'react-native-lock'
import { bindActionCreators } from 'redux';
import { insertUserId } from './actions/userInfoActions'
import * as actions from './actions/userInfoActions'
import { Home, Messages, DosList, Profile } from './routes'
import ScrollableTabView from 'react-native-scrollable-tab-view'

import Meteor from 'react-native-meteor';
Meteor.connect('ws://127.0.0.1:3000/websocket')
const lock = new Auth0Lock({clientId: 'xxx', domain: 'xxx'})


class Main extends Component {

  constructor(props){
    super(props)
    console.log('Constructor props', this.props)
    console.log('Constructor state', this.state)
  }

  onLogin() {
    lock.show({
      closable: true,
    }, (err, profile, token) => {
      if (err) {
        console.log(err);
        return
      }
      console.log('Lock success')
      console.log(token, profile)
      this.props.updateUserId(profile.userId)

    });
  }


  render(){
    console.log(this.props.userId)
      if(this.props.userId == ""){
        return (
          <View style={styles.container}>
            <View style={styles.messageBox}>
              <Image
                style={styles.badge}
                source={require('./images/dochange.gif')}
              />
            <Text style={styles.title}>DoCHANGE</Text>
              <Text style={styles.subtitle}>User: {this.props.userId}</Text>
            </View>
            <TouchableHighlight
              style={styles.signInButton}
              underlayColor='#949494'
              onPress={this.onLogin.bind(this)}>
              <Text>Log In</Text>
            </TouchableHighlight>
          </View>
        )
      } else {
        return (

          <ScrollableTabView style={{marginTop: 20, }} tabBarPosition="bottom">
            <Home tabLabel="Home"/>
            <Messages tabLabel="Messages"/>
            <DosList tabLabel="DOs"/>
            <Profile tabLabel="Profile"/>
          </ScrollableTabView>
        )
      }

  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: '#fff',
  },
  messageBox: {
    flex: 1,
    justifyContent: 'center',
  },
  badge: {
    alignSelf: 'center',
    height: 169,
    width: 151,
  },
  title: {
    fontSize: 17,
    textAlign: 'center',
    marginTop: 8,
    color: '#000',
  },
  subtitle: {
    fontSize: 17,
    textAlign: 'center',
    marginTop: 4,
    color: '#000',
  },
  signInButton: {
    height: 50,
    alignSelf: 'stretch',
    backgroundColor: '#f3f3f3',
    margin: 10,
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

const mapStateToProps = (state) => {
  console.log('mapStateToProps', state.userId.id)
  return {
    userId: state.userId.id
  }
}

const mapDispatchToProps = (dispatch) => {
  // return { actions: bindActionCreators(actions, dispatch) }
  return {
    updateUserId: (id) => {
      dispatch(insertUserId(id))
    }
  }
}

const ConnectedMain = connect(mapStateToProps, mapDispatchToProps)(Main)
export default ConnectedMain

Versions:
NPM @3.10.5
React-Native @0.33
React @ 15.3.1
react-native-lock @0.4.0
iOS 9.3

Pod file:
pod 'Lock', '~> 1.26'
pod 'Lock/TouchID'
pod 'Lock/SMS'
pod 'Lock/Email'

[booboothefool]

I am also having this issue:

  "dependencies": {
    "react": "^15.3.2",
    "react-native": "^0.34.1",
    "react-native-drawer": "^2.3.0",
    "react-native-lock": "^0.4.0",
    "react-native-router-flux": "^3.35.0",
    "react-redux": "^4.4.5",
    "redux": "^3.6.0"
  },

@hzalaz I can send you a copy of my (small) project if that'll help.

[gp3gp3gp3]

Was there ever a solution to this? After doing some digging around in the comments of this post it seems like v10 needs to use a watcher like lock.on, but the on function isn't available in react-native.

[hzalaz]

We could not reproduce it without redux and all the other deps, might be an issue when integrating them alongside with lock but had little time to set all those dependencies.
Also @gp3gp3gp3 this is not Lock for web so the options there are not available here

[martwetzels]

Since upgrading to newer versions of RN this issue no longer occurred. So I'll close.

[gp3gp3gp3]

That's too bad, as I'm still having this issue.

[martwetzels]

Could you share some info on your dependencies and some code?

[gp3gp3gp3]

Sure

	"dependencies": {
		"axios": "^0.15.3",
		"lodash": "^4.17.2",
		"react": "15.4.1",
		"react-native": "0.39.2",
		"react-native-lock": "^0.4.0",
		"react-native-router-flux": "^3.37.0",
		"react-native-vector-icons": "^3.0.0",
		"react-redux": "^5.0.1",
		"redux": "^3.6.0",
		"redux-thunk": "^2.1.0"

import React, { Component } from 'react'
import Auth0Lock from 'react-native-lock'
import { Actions } from 'react-native-router-flux'
import { Button, Card, CardSection } from './common'

class Welcome extends Component {
  componentWillMount () {
    this.renderLock()
  }

  renderLock () {
    const lock = new Auth0Lock({ clientId: {clientId}, domain: {domain} })
    lock.show({}, (err, profile, token) => {
      if (err) {
        console.error(err)
        return
      }
      console.log('Logged in with Auth0')
      console.log(`Token: `, token)
      console.log(`Profile: `, profile)
      Actions.main({ type: 'reset' })
    })
  }

  render () {
    return (
      <Card>
        <CardSection>
          <Button onPress={this.renderLock.bind(this)}>
            Log In
          </Button>
        </CardSection>
      </Card>
    )
  }
}

export default Welcome

I haven't set anything up in terms of assigning the token to AsyncStorage, but those console.logs still aren't firing off.

[WebsByTodd]

@gp3gp3gp3 have you had any luck getting this to work? If I pass the option closable: true to lock.show then the issue doesn't occur, however with the default of no options or explicitly specifying closable: false then the callback isn't fired. I have essentially the same dependency list and versions you have minus axios, react-native-vector-icons, redux and redux-thunk

[despreston]

I'm also now having this issue

[abelaska]

Same here.

react-native 0.42
react-native-lock: 0.5.0

[gp3gp3gp3]

@WebsByTodd No I gave up using Auth0 entirely and built out the authentication myself.

[WebsByTodd]

I ran into problem after problem using Auth0 for my native projects. It's unfortunate because it works great for the web and handles a lot of complicated security and logic.

It looks like building authentication from scratch or relying on OAuth libraries for specific providers is still the way to go for native auth.

[timoschlueter]

+1
react-native: 0.42.0
react-native-lock : 0.5.0

[levivoelz]

+1

[nupejosh]

+1

Has anyone had any luck with this issue? I'm using the following up to date libraries and still experiencing this bug.

"react": "~15.4.1",
"react-native": "0.42.0",
"react-native-lock": "^0.6.0",