Auth0 Home Blog Docs

Custom User Auth Flow with Lock UI

lock
custom-login

#1

Hello,

I have a use case where I need to authorize users based on a JWT that by website is passed (from an IFrame). My backend API can support this (create an “auth” endpoint that checks the token, provisions new accounts via the Auth0 management API, and returns an Auth0 JWT). However, I’m wondering if I can accomplish this without all the extra steps.

Ideally, I’d like to still take advantage of Lock by passing the token as a custom field or something, and using a rule to override the authentication? Would something like this work? At the end of the day, I would still like to use Auth0 to manage these users, along with my standard users (using a normal database connection), with minor modifications.


#2

I was just working on something similar to this.

Here’s the idea:

  1. Create a new Database connection called iframe-partner

  2. Under “Custom Database” select “Use my own database”.

2a) Write some JS for “Create”. Assume that password is the JWT from the iframe and email is some unique ID, verify the JWT using whatever custom JS you want, then potentially look up some extended profile info to attach.

2b) Write some JS for “Login”. Same as above, just verify the JWT.

  1. Use Auth0.js signup method for new users, and pass in the Iframe JWT as the password and the extracted unique user ID as email. This will ensure your users exist. Ignore errors when an user already exists.

    var jwt, userId; // Your variables
    webAuth.signup({ 
        connection: 'iframe-partner', 
        email: userId, 
        password: jwt
    }, function (err) { 
        if (err) return alert('Something went wrong: ' + err.message); 
        return alert('success signup without login!') 
    }); 
    
  2. Use Auth0.js login method to log the user in: https://auth0.com/docs/libraries/auth0js/v8#webauth-client-login-

    var jwt, userId; // Your variables
    webAuth.client.login({
    realm: ‘iframe-partner’,
    username: userId,
    password: jwt,
    scope: ‘openid profile’,
    audience: ‘mysite.auth0.com
    } function(err, authResult) {
    // Auth tokens in the result or an error
    });

Note: This method wouldn’t use the Lock UI for any users from the iframe-partner connection, but would be used for your vanilla email/password users. You’d need some custom UI for your iframe-partners still, but you wouldn’t require any backend server code.


#3

Thanks @logan, that’s a solid approach. I’ll play around with this and reply with any modifications I need to make.


#4