React Lock

Reusable React component for Auth0's Lock Widget.

Auth0 is an authentication broker that supports social identity providers as well as enterprise identity providers such as Active Directory, LDAP, Google Apps, Salesforce.

Lock Widget is a drop and use widget for Auth0 which comes with most authentication options that you can think of:

Installation

npm install --save auth0-react-lock

How to use

The component is what you are used to if you ever used React but this time with options to configure Lock and callbacks to handle authentication.

Example:

Redirect Mode

showLock(){
    this.refs.lock1.showLock();
}

hashHandler(err, profile){
  if(err) console.log(err);
  console.log(`:) ${profile}`)
}

render() {
  return (
    <div>
      <Lock
        clientID={Env.CLIENT_ID}
        domain={Env.DOMAIN}
        ref={"lock1"}
        connections={['google-oauth2', 'facebook']}
        socialBigButtons={false}
        hashHandler={this.hashHandler}
        />
        <button onClick={this.showLock.bind(this)}>Show</button>
    </div>
  );
}

Popup Mode

showLock(){
    this.refs.lock1.showLock(function(err, profile){
      if(err) console.log(err);
      console.log(profile);
    });
}

render() {
  return (
    <div>
      <Lock
        clientID={Env.CLIENT_ID}
        domain={Env.DOMAIN}
        ref={"lock1"}
        connections={['google-oauth2', 'facebook']}
        socialBigButtons={false}
        popup={true}
        />
        <button onClick={this.showLock.bind(this)}>Show</button>
    </div>
  );
}

Embedded Widget

// If the contaaner property is set, lock will be automatically embedded
<Lock
  container={"container-id"}
  clientID={Env.CLIENT_ID}
  domain={Env.DOMAIN}
  ref={"lock1"}
  connections={['google-oauth2', 'facebook']}
  socialBigButtons={false}
  popup={true}
  />

Lock Instance

You can also grab an instance of lock:

componentDidMount() {
  this.lock = this.refs.lock1.getLock();
  // And also grab Auth0.js instance
  this.auth0js = this.lock.getClient();
}

Example

The example to this component is implicit to the project.

# Install webpack-dev-server
npm install --g webpack-dev-server

# Clone
git clone https://github.com/auth0/auth0-react-lock

# Install dependencies
npm install

# Run Example
webpack-dev-server

Contributing

To run the tests:

Run grunt.

Issue Reporting

If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.

Author

Auth0

License

This project is licensed under the MIT license. See the LICENSE file for more info.