CODEWITHSUNDEEP
angularjsauth0
Michal Ogluszka
Michal Ogluszka

Reputation: 31

Customizing auth0-lock with auth0-angular

I'm experimenting with auth0-lock from www.auth0.com and AngularJS. I was able to pass some parameters as in SDK: https://auth0.com/docs/libraries/lock/customization#connections-array-

        auth.signin({
            disableSignupAction: true,
            socialBigButtons: true,
            //these lines don't work
            //no changes (username, password appears)
            //connection: 'windows-live'
            //this line returns 'No valid connection found'
            //connections: 'windows-live'
            //this line returns 'No valid connection found'
            //connections: ['windows-live']
            //this line doesn't change anything
            //connection: ['windows-live']

        }

but I'm not able to pass connections (non angular version from SDK)

lock.show({
connections: ['twitter', 'facebook', 'linkedin']
});

Both parameters connection or connections don't work.

The problem that I have is that if I don't specify connection (connections) username and password will appear. According to SDK I need to hardcode it, to hide these fields. As SDK is written for JS not AngularJS, it seems that I have an issue with passing array, or parameter. Any ideas?

Upvotes: 0

Views: 2174

Answers (3)

Bruce Allen
Bruce Allen

Reputation: 91

The documentation seems to be so-so on this. If you use //cdn.auth0.com/js/lock-8.js it should work out of the box as seen in previous response and following the examples https://github.com/auth0/auth0-angular/tree/master/examples.

I wrestled with connections: & connection for several hours trying to get some custom connections working.

For you as a base you could enable the various providers in the Auth0 social providers, make sure they toggle green. Start as simple as possible and expand from there.

 auth.signin({
        scope: 'openid name email'

index.html

<script type="text/javascript" src="//cdn.auth0.com/js/lock-8.js"></script>
<!--script src="//cdn.auth0.com/w2/auth0-6.7.js"></script-->
<script type="text/javascript" src="https://cdn.auth0.com/w2/auth0-angular-4.js"></script>
<script src="./lib/a0-angular-storage/dist/angular-storage.js"></script>
<script src="./lib/angular-jwt/dist/angular-jwt.js"></script>

login ctrl

 .controller('LoginCtrl',
  function onLoginSuccess(profile, token) {
        console.log("login ok");
    }

    function onLoginFailed() {
        console.log("failed login");
    }

    auth.signin({
        scope: 'openid name email'
    }, onLoginSuccess, onLoginFailed);
}

config block

.config(function($stateProvider, $urlRouterProvider, authProvider,
             jwtInterceptorProvider, $httpProvider) {

authProvider.init({
    domain: '',
    clientID: '',
    loginState: 'login',
    loginUrl: true
});


    authProvider.on('loginSuccess', function($location, profilePromise, idToken, store) {
        profilePromise.then(function(profile) {
            console.log(JSON.stringify(profile));

Upvotes: 0

dichen
dichen

Reputation: 1643

Have you enabled the Social in the dashboard? Enable Social

Upvotes: 1

Kassandra Perch
Kassandra Perch

Reputation: 580

You want to send an array with the connections parameter:

connections: ['windows-live']

Instead of a string like you have:

connections: 'windows-live'

Upvotes: 1

Related Questions