Giter Site home page Giter Site logo

lock's Introduction

Auth0's configurable login form for web applications Release Downloads License Build Status

⚠️ Lock is built using React 18 from v12 onwards. Getting issues? Please submit a bug report.

⚠️ From v12 onwards, we no longer publish to Bower.

Documentation

  • Docs Site - explore our Docs site and learn more about Auth0.

Getting Started

Browser Compatibility

We ensure browser compatibility in Chrome, Safari, Firefox and IE >= 11.

Installation

Install Lock into your project using npm:

npm install auth0-lock

From CDN

<!-- Latest patch release (recommended for production) -->
<script src="https://cdn.auth0.com/js/lock/12.5.1/lock.min.js"></script>

Configure Auth0

Create a Single Page Application in the Auth0 Dashboard.

If you're using an existing application, verify that you have configured the following settings in your Single Page Application:

  • Click on the "Settings" tab of your application's page.
  • Scroll down and click on the "Show Advanced Settings" link.
  • Under "Advanced Settings", click on the "OAuth" tab.
  • Ensure that "JsonWebToken Signature Algorithm" is set to RS256 and that "OIDC Conformant" is enabled. Next, configure the following URLs for your application under the "Application URIs" section of the "Settings" page:
  • Allowed Callback URLs: http://localhost:3000
  • Allowed Logout URLs: http://localhost:3000
  • Allowed Web Origins: http://localhost:3000

These URLs should reflect the origins that your application is running on. Allowed Callback URLs may also include a path, depending on where you're handling the callback (see below). Take note of the Client ID and Domain values under the "Basic Information" section. You'll need these values in the next step.

Configure the SDK

Create either an Auth0Lock or Auth0LockPasswordless instance, depending on your use case:

Auth0Lock

import { Auth0Lock } from 'auth0-lock';

const lock = new Auth0Lock('{YOUR_AUTH0_CLIENT_ID}', '{YOUR_AUTH0_DOMAIN}');

Auth0LockPasswordless

import { Auth0LockPasswordless } from 'auth0-lock';

const lock = new Auth0LockPasswordless('{YOUR_AUTH0_CLIENT_ID}', '{YOUR_AUTH0_DOMAIN}');

Logging In

Configure a listener for the authenticated event to retrieve an access token and call show to display the Lock widget.

<button id="login">Click to Login</button>
lock.on('authenticated', function (authResult) {
  lock.getUserInfo(authResult.accessToken, function (error, profileResult) {
    if (error) {
      // Handle error
      return;
    }

    accessToken = authResult.accessToken;
    profile = profileResult;

    // Update DOM
  });
});

// Show the widget when the login button is clicked
document.getElementById('login').addEventListener('click', () => {
  lock.show()
});.

For other comprehensive examples and documentation on the configuration options, see the EXAMPLES.md document.

Feedback

Contributing

We appreciate feedback and contribution to this repo! Before you get started, please see the following:

Raise an issue

⚠️ Note: We are no longer supporting requests for new features. Only requests for bug fixes or security patches will be considered.

To provide feedback or report a bug, please raise an issue on our issue tracker.

Vulnerability Reporting

Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.

What is Auth0?

Auth0 Logo

Auth0 is an easy to implement, adaptable authentication and authorization platform. To learn more checkout Why Auth0?

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

lock's People

Contributors

aaguiarz avatar adamjmcgrath avatar anthony0030 avatar beneliflo avatar cabralmartin avatar carljoachim avatar cocojoe avatar cristiandouce avatar davidpatrick avatar dependabot-preview[bot] avatar dependabot[bot] avatar evansims avatar ewanharris avatar frederikprijck avatar glena avatar gnandretta avatar hzalaz avatar jfromaniello avatar lbalmaceda avatar luisrudge avatar medelbbalci avatar piwysocki avatar rickyrauch avatar saltukalakus avatar sanntu avatar smatyas avatar snyk-bot avatar stevehobbsdev avatar thisis-shitanshu avatar woloski avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

lock's Issues

When popup: true => responseType: token should be default

Use the following snippet:

var widget = new Auth0Lock(cid, domain);

widget.show({
  popup: true,
}, function (err, profile, token) {
  alert(err);
});

What should happen? When using the widget and clicking in a social connection popup must be shown. When closing the popup err should be printed (responseType: token is set implicitly).

What happens instead? As responseType: code is the default the callback is not being executed.

Show alert if no callbackURL is defined and a callback is set

Right now, we show the World Domination message when the callback is missing and the user is trying a Social IdP. However, if the user tries to do a regular Username/Password Auth, a CORS error is thrown.

We should parse the s3 information to see if theres a callbackURL. If there's not and no callback is set to handle the success of the login, then we should show a message sayingPlease add currentURL as a CallbackURL on your application settings`.

Thanks!

Validate Options parameters strictly

As shown in this issue: #18 it may be a good idea to perform validations on options parameters in order to avoid typos and Lock not working as expected.

As @jfromaniello suggests:

I like an exception thrown, this will help also when depreciating an option, etc. Instead of silently failing.

Json schema will be the way to go,

handle require_username

When the connection has requires_username: true, lock should work as follows:

  1. Sign in: Ask for "Username or email" + "password". TWO FIELDS.
  2. Sign up: Ask for "Username" + "Email" + "password". THREE FIELDS.
  3. Password reset: Ask for "Username or email" + "password". TWO FIELDS.

The regex we will use to validate usernames is /^[a-zA-Z0-9_]{1,15}$/

Show gravatar picture on "last time you signed in with"

Do lock.showSignin. Log into an email associated with a gravatar picture. Then logout and the last time you signed in with message should appear when doing lock.showSignin.

What should happen? Gravatar picture should be displayed when last time you signed in with message is displayed.
What happens instead? No Gravatar picture is displayed at all.

Improve SPA wiki documentation

https://github.com/auth0/lock/wiki/Single-Page-Applications

@pose we should add the alternatives with redirect, like the customer who required to set state instead of opening in popup mode.

I'm might be too sleepy and wrong about this 👯

But either way documentation about the topic should be improved and you are THE guy for this.
:trollface:

cc @mgonto


EDIT:

@mgonto created this document https://github.com/auth0/lock/wiki/Types-Of-Applications

Which is quite complete as an explanation.

We should only add code examples.

And make links smaller :trollface: cc @mgonto

Add warning when using connection instead of connections

If we have the following code:

widget.show({
  focusInput: false,
  connection: 'Initial-Connection',
  popup: true
}, function (err, profile, token) {
  alert(err);
});

What should happen? A warning should displayed because connection field does not exist as a lock option. The warning should say that what the user must type is connections.

What happens instead? The parameter is silently ignored and you may think that the connection parameter works but it does not.

If no `callbackURL` is provided, we should default to `responseType: token`

When we use responseType: code it means that we usually want to get the code in the server and then from that get the accessToken to get info from the user.

When we don't set a callbackURL, it will default to location.href which usually will be the same page, not a callback. That will happen mostly in SPAs. Therefore, I think that if callbackURL isn't provided, we should default to responseType: token

Add user gravatar image when user types email

  • login ready
    • Add transition (fade-in)
    • Border radius round (like blog)
    • if no picture, do show the previous icon
    • add new parameter to show: gravatar by default it will be true.
    • signup
  • design ready
    • tried on ie9
    • tried on ie10*
    • tried on iOS
    • tried on Android Chrome
  • documented?
    • added to lock docs
  • described test cases
  • tried test cases
    • icon: URL
    • icon: false
    • if enterpise connection it should not work
    • if ad connection it should not work
    • if db connection it should not work
    • should work on signup

[*] Animations not working (See #45)

PhoneGap "last time you signed in with" is broken

It always goes back to the same state. For example:

Logging in for the first time:

screen shot 2014-09-26 at 2 14 08 pm

Going back to showing the widget again:
screen shot 2014-09-26 at 2 14 23 pm

After trying to log in, it goes back to the same spot but inside a web view:
screen shot 2014-09-26 at 2 14 34 pm

To reproduce, you can use this in app.js:

function showWidget(e) {
  e.preventDefault();
  widget.signin({ popup: true} , null, function(err, profile, token) {
    if (err) {
      // Error callback
      console.log("There was an error");
      alert("There was an error logging in");
    } else {
      // Success calback

      // Save the JWT token.
      localStorage.setItem('userToken', token);

      // Save the profile
      userProfile = profile;

      $('.login-box').hide();
      $('.logged-in-box').show();
      $('.nickname').text(profile.nickname);
      $('.nickname').text(profile.name);
      $('.avatar').attr('src', profile.picture);
    }
  });
}

$('.btn-login').click(showWidget);

$('#back').click(showWidget);

You also need to add a Back button in index.html:

<input type="button" value="Back" id="back" />

Listing two ad/enterprise connections should display email for HRD

Use the following snippet:

widget.show({
  focusInput: false,
  closable: false,
  connections: ['adconn', 'adconn2'],
  responseType: 'token',
  callbackURL: 'http://localhost:3000'
});

What should happen? An email and password lock should be displayed where user can enter their emails. Then deciding on the email domain that the user has input, it should display the HRD mode.

What happens instead? The following screenshot:
screen shot 2014-09-19 at 19 16 04

Tests are not testing

We are using expect.js for our tests. Many of our tests are using the following type of assertion:

expect(foo).to.exist;
expect(foo).to.not.exist;

But if you take a closer look at expect.js repo, I cannot find a single mention of the keyword exist (I suspect exist could be part of chai assertion framework) . Lots of tests are passing without asserting the required behavior.

Gravatar animation fixes

  • move 500 to a constant and align it to the .animation.fast's animation-duration.
  • Add a _.debounce to onemailinput handler.
    • signin
    • signup
  • Make the change of logo only when succeeding loading the image (probably, preload it somewhere else) when {icon: 'http://....'} This has been solved by the _.dobounce
  • ~~ When erasing the whole email in some cases the picture converts to a square.~~ Cannot reproduce, but fixed some related bug.

Auth0 Widget/Lock redundant home realm discovery

When an app only has a single enterprise connection, it should show a button to redirect the user to the login page rather than to ask them for their email address, since there is no need for it to discover the home realm.

HRD Support for AD Connectors

WIP

The user story will be:

  1. User writes their email.
  2. While the user press enter or clicks on signin, we search throughout the connections if there is one of them registered with the email suffix and its type is AD Connector (for instance, @mydomain.com).
  3. lock launches new mode (adldap) (or shall we re-use signin mode @cristiandouce ?)
  4. This new state has username instead of email and it can write the password there. The new screen has not forgotten email or signup. Only a cancel button to go to the previous state.
  5. When they enter the credentials and clicks on access it should use the selected ad/ldap connection sending username and password. There should not be a redirect as it happens today. It should work as a DB connection.

  • Try with an enterprise connection.
  • Implement escape key to leave HRD. No escape for now.
  • What happens if my domain is really large?
    • #25
    • add to tittle field of the access button the full domain name.
    • add overflow and text-overflow (for ellipsis)
  • Implement new UI (as shown in #lock)
  • show top label when there is only one ad connection. This is error prone as the connection may have multiple domain aliases. Not doing for now.
  • Code Cleanup

tasks

  • widget login ready?
  • documented?
  • updated widget docs
  • updated auth0-configuration No lock yet.
  • updated auth0-vagrant No lock yet.
  • Contacted people who wanted that feature

Implement password strength

  • add i18n messages to widget
  • widget design ready?
  • tried on ie9
  • tried on ie10 (thx @rolodato)
  • tried on ie11 (thx @rolodato)
  • tried on iOS
  • tried on Android
  • end documentation with widget screenshots (auth0/docs#185)
  • add reusable components to style guide (if any)
  • test cases
    • signup
    • change password

Inspiration (how it should look like)

Webpack

I tried to load this using webpack but I did not very very far due to not knowing what loaders it would require...
Any advice?

Deprecate Auth0 Widget

Once Auth0 Lock is finally officially released:

  • Add deprecation notice to Auth0 Widget (latest release).
  • Add to Auth0 Widget README a link to Auth0 Lock migration docs.
  • Deprecate auth0-widget.js npm
  • Deprecate auth0-widget.js bower

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.