# Unable to setRoot after login successful

**URL:** <https://discourse.aurelia.io/t/unable-to-setroot-after-login-successful/3482>\
**Category:** Help Requests\
**Created:** [May 11, 2020, 6:52pm UTC](https://discourse.aurelia.io/t/unable-to-setroot-after-login-successful/3482 "2020-05-11T18:52:55Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [May 11, 2020, 6:52pm UTC](https://discourse.aurelia.io/t/unable-to-setroot-after-login-successful/3482/1 "2020-05-11T18:52:55Z")

</div>

I am making a login view for my app using my own basic login structure to check a database for login credentials.

When doing that, I’ve got the setRoot function in main.js as ‘login’, and so it displays the login view just fine. But when I successfully login, I am unable to setRoot again to ‘app’.

This is the console error:

```auto
Uncaught TypeError: Cannot read property 'setRoot' of undefined

```

When I log the value of aurelia, it’s undefined.

I am not sure what I am missing.

here is my login.js file:

```auto
import {Aurelia, inject} from 'aurelia-framework';
import jquery from 'jquery';
import {AureliaCookie} from 'aurelia-cookie';

window.jQuery = jquery;
window.$ = jquery;

export class Login {

  constructor(aurelia) {
    this.aurelia = aurelia;
    this.loginResponse = null;
    this.login();
    }

    heading = 'Login';

    username = '';
    password = '';
    
    login() {
            
        if ( this.username && this.password )
        {
            var params = '?username=' + this.username + '&password=' + this.password;
            var url = 'http://[ip address]/login.pl'; // + params;
  
            jquery.ajax({
              type: "GET",
              url: url, // URL of the Perl script
              contentType: "application/json; charset=utf-8",
              dataType: "jsonp",
              headers: { 'Access-Control-Allow-Origin': '*' },
              mode: 'no-cors',
              crossDomain: true,
              jsonp: 'callback',

              // send username and password as parameters to the Perl script
              data: "username=" + this.username + "&password=" + this.password,
              // script call was *not* successful
              error: function(XMLHttpRequest, textStatus, errorThrown) { 
                jquery('div#loginResult').text("responseText: " + XMLHttpRequest.responseText 
                  + ", textStatus: " + textStatus 
                  + ", errorThrown: " + errorThrown);
                jquery('div#loginResult').addClass("error");
              }, // error 
              // script call was successful 
              // data contains the JSON values returned by the Perl script
              success: function(data){
                if (data.error) { // script returned error
                  jquery('div#loginResult').text("data.error: " + data.error);
                  jquery('div#loginResult').addClass("error");
                } // if
                else { // login was successful
                  jquery('form#loginForm').hide();
                  jquery('div#loginResult').text("data.success: " + data.success 
                    + ", data.userid: " + data.username);
                  jquery('div#loginResult').addClass("success");

                  AureliaCookie.set( 'ARIS', 'value', {
                    expiry: 8, //8 hrs is a normal workday
                    domain: 'http://10.40.10.26',
                    REMOTE_USER: data.username,
                  });

                   // this is where I get the error that aurelia is null
                  this.aurelia.setRoot( 'app' );

                } //else
              } // success
            }); // ajax
        } // if
        else {
          jquery('div#loginResult').text("enter username and password");
          jquery('div#loginResult').addClass("error");
        } // else
        jquery('div#loginResult').fadeIn();
        return false;
    }
  }

```

---

<div class="post-metadata">

**Author:** ![ormasoftchile](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ormasoftchile/32/340_2.png) [@ormasoftchile](https://discourse.aurelia.io/u/ormasoftchile)\
**Post date:** [May 11, 2020, 10:31pm UTC](https://discourse.aurelia.io/t/unable-to-setroot-after-login-successful/3482/2 "2020-05-11T22:31:59Z")

</div>

Looks like the callback function “success” doesn’t access the right “this”.  
I suggest trying to define const self = this as the first statement of the login() function and then in success, do

`self.aurelia.setRoot('app')`

Hope this works for you.

---

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [May 11, 2020, 11:02pm UTC](https://discourse.aurelia.io/t/unable-to-setroot-after-login-successful/3482/3 "2020-05-11T23:02:55Z")

</div>

Thanks for the suggestion. I tried that, but I am still getting the same error.

Am I calling/constructing the aurelia section of this properly?

I feel like it’s something basic that I am missing.

---

<div class="post-metadata">

**Author:** ![ormasoftchile](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ormasoftchile/32/340_2.png) [@ormasoftchile](https://discourse.aurelia.io/u/ormasoftchile)\
**Post date:** [May 12, 2020, 1:58am UTC](https://discourse.aurelia.io/t/unable-to-setroot-after-login-successful/3482/4 "2020-05-12T01:58:06Z")

</div>

Next thing is I can’t find the injection code for the aurelia instance.  
You should inject the dependency on your class by using @inject(Aurelia), @autoinject or with static inject = [Aurelia]  
Hope this helps.

---

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [May 12, 2020, 3:15pm UTC](https://discourse.aurelia.io/t/unable-to-setroot-after-login-successful/3482/5 "2020-05-12T15:15:07Z")

</div>

If I add the line:

```auto
@inject(Aurelia)

//@inject(jquery)

window.jQuery = jquery;
window.$ = jquery;

```

I get the following error:

```auto
Leading decorators must be attached to a class declaration (9:0)

```

The lines it’s complaining about now are the window.jQuery lines which I need in order to make ajax work properly.

---

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [May 12, 2020, 3:49pm UTC](https://discourse.aurelia.io/t/unable-to-setroot-after-login-successful/3482/6 "2020-05-12T15:49:24Z")

</div>

So I changed what I was doing a bit, and added the line you suggested from self.aurelia.setRoot…

and then I got a new error:

line:

`self.aurelia.setRoot( PLATFORM.moduleName( 'app' ) );`

error:

`Error: Unable to find module with ID: app at WebpackLoader.eval`

I imported PLATFORM, because I originally was just doing a `setRoot('app')`, and got the same error.

---

<div class="post-metadata">

**Author:** ![ormasoftchile](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ormasoftchile/32/340_2.png) [@ormasoftchile](https://discourse.aurelia.io/u/ormasoftchile)\
**Post date:** [May 12, 2020, 4:20pm UTC](https://discourse.aurelia.io/t/unable-to-setroot-after-login-successful/3482/7 "2020-05-12T16:20:35Z")

</div>

If you use @inject, it must be just before the class declaration.

You might do this as well:

```
export class Login {
static inject = [Aurelia];

  constructor(aurelia) {
...
```

---

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [May 12, 2020, 4:33pm UTC](https://discourse.aurelia.io/t/unable-to-setroot-after-login-successful/3482/8 "2020-05-12T16:33:39Z")

</div>

Thank you for this reply.

I was able to get things working by setting the app class to this:

`export default class App`

That exported the module ‘app’ so that I could setRoot with it in my login module.