how to redirect after authentication using oidc client in react app

Question

I am trying to do authentication using identity server 4 for my react app.i followed this documentation.I am using implicit flow of identity server so onload application it will go to login page of identity server. after giving proper username and password it will validate and give a token.Everything is working as expected but i am not able to redirect my react app to Dashboard page.I am very new to react please help me.

  // Copyright (c) Microsoft. All rights reserved.

import Config from 'app.config';
import AuthenticationContext from 'adal-angular/dist/adal.min.js'
import { Observable } from 'rxjs';
import { HttpClient } from 'utilities/httpClient';
import { toUserModel, authDisabledUser } from './models';
import Oidc, { User } from 'oidc-client';

const ENDPOINT = Config.serviceUrls.auth;

export class AuthService {

  //static authContext; // Created on AuthService.initialize()
  //static authEnabled = true;
  //static aadInstance = '';
  //static appId = '00000000-0000-0000-0000-000000000000';
  //static tenantId = '00000000-0000-0000-0000-000000000000';
  //static clientId = '00000000-0000-0000-0000-000000000000';

  static initialize() {
    if (typeof global.DeploymentConfig === 'undefined') {
      alert('The dashboard configuration is missing.

Verify the content of webui-config.js.');
      throw new Error('The global configuration is missing. Verify the content of webui-config.js.');
    }

    if (typeof global.DeploymentConfig.authEnabled !== 'undefined') {
      AuthService.authEnabled = global.DeploymentConfig.authEnabled;
      if (!AuthService.authEnabled) {
        console.warn('Auth is disabled! (see webui-config.js)');
      }
    }

    //AuthService.tenantId = global.DeploymentConfig.aad.tenant;
    //AuthService.clientId = global.DeploymentConfig.aad.appId;
    //AuthService.appId = global.DeploymentConfig.aad.appId;
    //AuthService.aadInstance = global.DeploymentConfig.aad.instance;

    if (AuthService.aadInstance && AuthService.aadInstance.endsWith('{0}')) {
      AuthService.aadInstance = AuthService.aadInstance.substr(0, AuthService.aadInstance.length - 3);
    }

    // TODO: support multiple types/providers
    if (AuthService.isEnabled() && global.DeploymentConfig.authType !== 'aad') {
      throw new Error(`Unknown auth type: ${global.DeploymentConfig.authType}`);
    }

    //AuthService.authContext = new AuthenticationContext({
     // instance: AuthService.aadInstance,
      //tenant: AuthService.tenantId,
      //clientId: AuthService.clientId,
      //redirectUri: "http://localhost:3000/dashboard",
      //expireOffsetSeconds: 300, // default is 120
      //postLogoutRedirectUri: window.location.protocol
    //});
  }

  static isDisabled() {
    return AuthService.authEnabled === false;
  }

  static isEnabled() {
    return !AuthService.isDisabled();
  }

  static onLoad(successCallback) {
    debugger;
    AuthService.initialize();
    if (AuthService.isDisabled()) {
      console.debug('Skipping Auth onLoad because Auth is disabled');
      if (successCallback) successCallback();
      return;
    };
    var config = {
      authority: "http://localhost:5000",
      client_id: "mvc",
      redirect_uri: "http://localhost:3000/dashboard",
      response_type: "id_token token",

      post_logout_redirect_uri : "http://localhost:5003/index.html",
  };
  var mgr = new Oidc.UserManager(config);
  mgr.signinRedirect();


  mgr.getUser().then(function(user){
    if(user){
      console.log("User logged in", user.profile);
    }
    else {
      console.log("User not logged in");
  }
  }); 
  mgr.events.addUserLoaded(function(userLoaded){
    mgr.User=userLoaded;
  })
  mgr.events.addSilentRenewError(function (error){
    console.log('the user has signrd out');
    mgr._user=null;
  })


  //mgr.login();

  //mgr.renewToken();


    // Note: "window.location.hash" is the anchor part attached by
    //       the Identity Provider when redirecting the user after
    //       a successful authentication.
    // if (AuthService.authContext.isCallback(window.location.hash)) {
    //   console.debug('Handling Auth Window callback');
    //   // Handle redirect after authentication
    //   AuthService.authContext.handleWindowCallback();
    //   const error = AuthService.authContext.getLoginError();
    //   if (error) {
    //     throw new Error(`Authentication Error: ${error}`);
    //   }
    // } else {
    //   AuthService.getUserName(user => {
    //     if (user) {
    //       console.log(`Signed in as ${user.Name} with ${user.Email}`);
    //       if (successCallback) successCallback();
    //     } else {
    //       console.log('The user is not signed in');
    //       AuthService.authContext.login();
    //     }
    //   });
    // }
  }

  static getUserName(callback) {
    if (AuthService.isDisabled()) return;

    if (AuthService.authContext.getCachedUser()) {
      Observable.of({ Name:AuthService.authContext._user.userName, Email: AuthService.authContext._user.userName })
        .map(data => data ? { Name: data.Name, Email: data.Email } : null)
        .subscribe(callback);
    } else {
      console.log('The user is not signed in');
      AuthService.authContext.login();
    }
  }

  /** Returns a the current user */
  static getCurrentUser() {
    if (AuthService.isDisabled()) {
      return Observable.of(authDisabledUser);
    }
    return HttpClient.get(`${ENDPOINT}users/current`)
      .map(toUserModel);
  }

  static logout() {
    if (AuthService.isDisabled()) return;

    AuthService.authContext.logOut();
    AuthService.authContext.clearCache();
  }

  /**
   * Acquires token from the cache if it is not expired.
   * Otherwise sends request to AAD to obtain a new token.
   */
  static getAccessToken() {
    debugger;
    if (AuthService.isDisabled()) {
      return Observable.of('client-auth-disabled');
    }

    return Observable.create(observer => {
      return AuthService.authContext.acquireToken(
        AuthService.appId,
        (error, accessToken) => {
          if (error) {
            console.log(`Authentication Error: ${error}`);
            observer.error(error);
          }
          else observer.next(accessToken);
          observer.complete();
        }
      );
    });
  }
}

The problem i am facing is after authentication my app is going some kind of loop means the url of app is changing to identity server and local app url.you can see my app was using AuthenticationContext from adal previously.i want to change into oidc for identity server4.

how to redirect after authentication using oidc client in react app

Answers (1)

Related Questions