Custom login with wrong credentials flow

[alejandrogkl]

where should i received 401 errors from the server when invalid credentials.

return $ionicAuth.login('custom', userInfo , {'remember': userInfo.remember , 'inAppBrowserOptions': {'hidden': true}})
                .then( function(response){

                    return response;
                })
                .catch(function(error){
                    console.log(error);
                });

if the credentials are ok it work

[ericb]

It looks like we are lacking the ability to handler errors on the client side with our current custom auth flow. I think there are two things we should address here:

1. Add the ability to redirect with an error case (useful for custom auth that uses inappbrowser to display a custom login page)
2. Add the ability for custom auth to disregard Inappbrowser entirely and respond with a 401 status and a response body

[rgecy]

From what I can find, the inAppBrowser plugin has issues with the loaderror callback. I went through the Ionic Cloud Custom Auth flow and could never make the loaderror trigger. It would be nice to handle the custom Auth without the inAppBrowser, and keep the user within the Ionic forms.

I was able to create a workaround where I called my custom login script to check the credentials and if success, then try the IonicAuth login. It works fine since the credentials are valid.

Thanks,

RGecy

[barretodaniel]

Hello @ericb, just wondering what the status on this is. Are we going to see this in an update soon?

[danielolivaresd]

Note: I have not tested the following, but I think it could be a workaround

What if instead of responding with a 401 status we intentionally send a wrong (or no) token to the redirect_uri so that this returns a 422 error? I think this could work at least for the case in which inAppBrowserOptions.hidden is set to true. My hypothesis is that this error (422 from Ionic Cloud) may be received on the $ionicAuth.login error calback.

Will try to test this tomorrow. If this doesn't work, hopefully we can find a solution, since otherwise I don't know how we can handle authentication errors.

Update: Was too anxious so made a quick test and even if Ionic Cloud endpoint returns an error, we cannot catch it from $ionicAuth.login. Therefore, @ericb's "two things that should be addressed" seem to be the only feasible solution.

[ericb]

@barretodaniel I've had a few distractions this week, but I'd like to say we'd have something out for this by end of next week.

@K1N5L4Y3R Thanks for testing a potential workaround, even if it didn't pan out 👍

[ericb]

:octocat: Update

I've pushed a new version of the cloud client and cloud-angular that addresses a portion of this. I've still got to update the custom-auth-examples project, but you should be able to send a custom error message with the inappbrowser flow by doing a redirect without a token and instead specifying an error.

That might be a bit hard to understand without documentation so let me know if you're having problems implementing it and I can help help with your server-side implementation.

Next step is to implement a solution which doesn't require the inappbrowser at all, but I've got some other things in progress that will likely come first, so you'll have to wait a bit for that 👌

[alejandrogkl]

thanks a lot @ericb , i let you as soon as we test the flow. Probably on monday.

[danielolivaresd]

@ericb thank you so much! I will also let you know my findings as soon as I test it.

[barretodaniel]

Thanks @ericb. I'm not sure if you remember our conversation about this, but do you know anything about being able to send data back through the request for custom authentication? We'd like to send back an authentication token so we don't have to hit our servers again for one after successful logins.

[ericb]

@barretodaniel I do, this does not address that yet, though there is potential for it with the non inappbrowser flow I mentioned earlier.

[danielolivaresd]

@ericb After some testing, I can say this seems to work as expected. Thanks again.

[shajeeck]

@ericb I think the docs are still not updated, or the php example given in the docs doesnt address this issue of error handling, I tried but was not able to get a solution. Can you help me with a small doc or an edit of the php example given in ionic Auth docs

[devlinkki]

Hi, someone make this works, i can not get the error on the ionic auth with custom login.

[pwagner]

I'm trying to implement custom auth with a hidden inAppBrowser. I don't get what @ericb is referring to with "you should be able to send a custom error message with the inappbrowser flow" - presumably the issue is solved with a visible inAppBrowser, but I could not find hints on how to implement that. At the moment my auth server is responding with a HTTP 401 status and a JSON body containing an error property, but the according callback in Auth's login method never gets executed. I'm wondering whether I should implement @rgecy's workaround, or wait for this issue to get picked up again.

[opmat]

If anyone is still having an issue with this in PHP, all you need to do is update the code in index.php file from the example to the code below;

<?php

use Ionic\CustomAuthentication;

require 'vendor/autoload.php';

Flight::route('/auth',function () {
    try {
        $redirect_uri = CustomAuthentication::process($_GET['token'], $_GET['state'], $_GET['redirect_uri']);
        Flight::redirect($redirect_uri);
    } catch (\Exception $e) {        
        $redirect_uri = $_GET['redirect_uri'] . '&' . http_build_query([
                'error' =>  $e->getMessage(),
                'state' => 401,
                'code' => $e->getCode(),
            ]);
        Flight::redirect($redirect_uri);
    }
});

Flight::start();

Works for me. I hope it saves someone some headache

[rgibanez]

@opmat - thanks for this it was really helpful.

How do you access the error message text within an Ionic controller and then apply this text to a scope variable?

Thanks

[opmat]

@rgibanez you can use the normal error handling. I used it in typescript

$ionicAuth.login('custom', loginData, loginOptions).then( ... ), function(error) {
    //you can play around with the returned parameters
  };

[rgibanez]

@opmat - thanks for getting back to me, I tried to populate an object using the returned 'error' but it just comes back as an empty object.

Here is my code, the error object returned is empty, or at least seems to be to me

   $ionicAuth.login('custom', loginData, loginOptions).then(function(){ 
        var loginID = $ionicUser.details.external_id;
        var ionicUserID = $ionicUser.id;

        MyService.createAccessTokenForUser(loginID, ionicUserID).then(function(){

            $rootScope.$broadcast('login_change');

            // Go to the home page
            $state.go('menu.home');

        });

    }, function(error){

        // Error
        $scope.error = error;

        $scope.hideLoading();
    });

I don't know how to access the string that was set as the error text in the URL I sent back to the Ionic servers.