Ionic login


Hi all!
I was looking for good code for ionic login issue if I wanted to do it not with google/facebook,
I found some code for refrense
I did some code but looks I have 2 issues,
the first one the redrect not working after login

the error

Error: Cannot transition to abstract state ‘app’

the code

.controller('LoginCtrl', function ($scope, $state, AuthenticationService) {
    $scope.message = "";

    $scope.user = {
        username: null,
        password: null

    $scope.login = function () {

    $scope.$on('event:auth-loginRequired', function (e, rejection) {
        console.log('handling login required');

    $scope.$on('event:auth-loginConfirmed', function () {
        $scope.username = null;
        $scope.password = null;

the app

 .state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "templates/menu.html",
        controller: 'AppCtrl'
    .state('app.placeslists', {
        url: "/placeslists",
        cache: false,
        views: {
            'menuContent': {
                templateUrl: "templates/placeslists.html",
                controller: 'PlaceslistsCtrl'

and the second issue how can I do what urls need to be after login and what not.



Because ‘app’ is an abstract state, you should use it only as container for other states.


And how can I do it with my structure? I don’t what to change the logic, how can I do it on my abstract?


Simply navigate to the homepage or something, so:

.state('app.home', {
        url: "/home",
        cache: false,
        views: {
            'menuContent': {
                templateUrl: "templates/home.html"

$scope.$on('event:auth-loginConfirmed', function () {
        $scope.username = null;
        $scope.password = null;


And how can I do some routes that they should be auth with login?


I have a sample here where I am using parse as the backend for auth, but the pattern should work with any service


Ionic uses the angular-ui-router library for routing, so their documentation would be a good place to start. Here’s a relevant FAQ.

A simple method would be to take advantage of the $stateChangeStart event message to conditionally do something before the state actually changes. Like redirect the user if they are not logged in:

var MyLogInRequiredStates = ['app.page1', 'app.page2'];

$rootScope.$on('$stateChangeStart', function(event, toState) {
    // This function will be called before every state change
    if (MyLogInRequredStates.indexOf( > -1) {
        if (!MyUserService.isLoggedIn()) {
            // Prevent the state change from happening
            // Then redirect to our desired page

You’ll need to place this code somewhere where it will only be executed once, for example not inside of a controller.

@aaronksaunders’s method is really cool too. I hadn’t thought of using resolve to check for the login status.


I think @neilgoldman305 neilgoldman305 this isnt correct because it can couse loop for state change …