Need some help, Getting Error : Response with status: 404 Not Found for URL: null

[haroonabbasi]

Hi,

i try to integrate this library and use in simple angular2 sample project

Tried facebook as provider, google as provider but same error

Error :Response with status: 404 Not Found for URL: null

• Error happens when popup open and get authorized and redirect to localhost:3000 with code and other parameters and then popup get closed after that this error happened
• i think this error is coming when exchangeForToken function is performed my data input for that functions is

exchangeForTokenUrl :/auth/facebook

data :{"name":"facebook","url":"/auth/facebook","authorizationEndpoint":"https://www.facebook.com/v2.5/dialog/oauth","redirectUri":"http://localhost:3000/","requiredUrlParams":["display","scope"],"scope":["email"],"scopeDelimiter":",","display":"popup","oauthType":"2.0","popupOptions":{"width":580,"height":400},"clientId":"31858675345345163593","defaultUrlParams":["response_type","client_id","redirect_uri"],"responseType":"code","responseParams":{"code":"code","clientId":"clientId","redirectUri":"redirectUri"},"code":"AQAtEQd-1C1i5PakhyPVbQhavKscKWF2Ba8WxDrMG7AiTBol0drimJr30nLfArAHVq9ogdfgdf0vOH1VtploWz29_derz-_Gn6T5EHmJWAoT_Gox756vs98GfH6KLYE2FvWmY-gif5JePO_9bTOAk1xBTO_iE8jR-ldn6PM4gsxUKIJMYmckolmWWqNSKXLosm-cxLM292-RRUG3OAcRqON7Pkg6uRU7ZE_yqqYzG1ecHpaoShTkc40xIHm3PMLJNJc4eAbSwM4atmUu9QC6BEitf9GIb8qTtJ9poyOfVkGK8eHuMHESZqSzNlHap5mKca-ghWEsad1WsMvgKm8BnqRJofyiq9","_":"_"}

i guess http post call in exchangeForToken function return this error.

i any idea

client app custom config

export class MyAuthConfig extends CustomConfig {
    defaultHeaders = {'Content-Type': 'application/json'};
    providers = {
      google: {
        clientId: GOOGLE_CLIENT_ID,
        url: '/auth/google',
        //redirectUri: 'http://localhost:3000'
      },
      facebook: {
        clientId: '318586755163593',
        url: '/auth/facebook',
        //redirectUri: 'http://localhost:3000'
      }
    };
}

onserver side i have /auth/google and /auth/facebook as post request which are going to do the rest stuff but i guess the whole process doesn't even reaching that part

for node server side i used the sample from (https://github.com/sahat/satellizer/tree/master/examples/server/node)

[ronzeidman]

Null URL. that's interesting. this is the URL that is composed to for the "exchangeForToken" logic: let exchangeForTokenUrl = this.config.baseUrl ? joinUrl(this.config.baseUrl, this.defaults.url) : this.defaults.url; As you can see, when you define your url it cannot be null... and you say it's not so how do you get a null URL? Can you share the login component and the module code?

[haroonabbasi]

Hi, thanks for replying so quickly!

the app.module.ts file code

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { RouterModule }   from '@angular/router';
import { HttpModule }    from '@angular/http';

// used to create fake backend
import { fakeBackendProvider } from './helpers/fake-backend';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { BaseRequestOptions } from '@angular/http';

import { AuthGuard } from './guards/auth.guard';
import { AuthenticationService } from './services/authentication.service';
import { UserService } from './services/user.service';
import { LoginComponent } from './components/login/login.component';

import {Ng2UiAuthModule} from 'ng2-ui-auth';
import { MyAuthConfig } from './my-auth-config';

// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api/in-memory-web-api.module';
import { InMemoryDataService }  from './in-memory-data.service';

import { AppComponent }  from './components/app.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { HeroesComponent } from './components/heroes/heroes.component';
import { HeroDetailComponent } from './components/heroes/hero-detail.component';
import { HeroService } from './services/hero.service';

import { AppRoutingModule }     from './app-routing.module';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    AppRoutingModule,
    Ng2UiAuthModule.getWithConfig(MyAuthConfig)
  ],
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HeroesComponent,
    HeroDetailComponent
  ],
  providers: [
    AuthGuard,
    AuthenticationService,
    UserService,
    // providers used to create fake backend
    //fakeBackendProvider,
    //MockBackend,
    //BaseRequestOptions,

    HeroService
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

The login.component.ts File code

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {AuthService} from 'ng2-ui-auth';

import { AuthenticationService } from '../../services/authentication.service';

@Component({
    moduleId: module.id,
    templateUrl: 'login.component.html'
})

export class LoginComponent implements OnInit {
    model: any = {};
    loading = false;
    error = '';

    constructor(
        private router: Router,
        private authenticationService: AuthenticationService,
        private auth: AuthService,
      ) { }

    ngOnInit() {
        // reset login status
        this.authenticationService.logout();
    }

    login() {
        this.loading = true;
        this.authenticationService.login(this.model.username, this.model.password)
            .subscribe(result => {
                if (result === true) {
                    // login successful
                    this.router.navigate(['/']);
                } else {
                    // login failed
                    this.error = 'Username or password is incorrect';
                    this.loading = false;
                }
            });
    }

    loginWithGoogle() {
        this.auth.authenticate('google')
            .subscribe({
                error: (err: any) => {
                  console.log('Error :' + err);

                  //this.error = 'Username or password is incorrect';
                  //this.loading = false;
                },
                complete: () => {
                  this.router.navigateByUrl('dashboard');
                }
            });
    }
    loginWithFacebook() {
        this.auth.authenticate('facebook')
            .subscribe({
                error: (err: any) => {
                  console.log('Error :' + err);

                  //this.error = 'Username or password is incorrect';
                  //this.loading = false;
                },
                complete: () => {
                  this.router.navigateByUrl('dashboard');
                }
            });
    }

}

[ronzeidman]

Everything looks in order... I've tried to reproduce it and seems like it works for me...

if you used the satellizer example you should have the morgan logs, can you show them?

if you don't even get there can you give me the exact error from chrome's network tab (not from your log)?

I'm hoping it will give more information send the headers and response sections (hoping it's something other than null)

[haroonabbasi]

Thats the strange thing the request is not getting logged in network tab at all, like its not even happening but console show the error.

will check again.

[ronzeidman]

Try running the example client with your server and the example server with your client https://github.com/ronzeidman/ng2-ui-auth-example

[ronzeidman]

any update?

[ronzeidman]

Closing due to no update.