Need Help In correct Implementaion

[jmandivarapu1]

Hi,

I really like the simple way you implemented it.

I am facing one issue.

1. I have kept my MS login button in http://localhost:3000/#/login

2. When User clicks the button. It opens the mslogin in New tab.

3. Once I login it redirects me to to http://localhost:3000/#/login in the new tab only. but with no data being printed.

4. I saw your example Implemeted the same. Can't figure out where I made the mistake. I want to come to same page with data.

If needed open to share my code

 <MicrosoftLogin 
 withUserData={withUserData}
 clientId={""} 
 authCallback={this.loginHandler} 
graphScopes={["user.read"]}/>

[alexandrtovmach]

Hello,

@jmandivarapu1 Could you share your code please?

[jmandivarapu1]

Sorry for late reply.

But here my code

  constructor(props) {
    super(props);
    this.state = {
      withUserData: true,   
    }
  }

render() {
    const { email, password,withUserData} = this.state;
    return (
<div>
 <MicrosoftLogin 
 withUserData={withUserData}
 clientId={""} 
 authCallback={this.loginHandler} 
graphScopes={["user.read"]}/>
</div>

[jmandivarapu1]

FOR SIMPLICITY and for easy reproducing the issues I moved my button to separate page for sample. You can Use above code and this too

import React, {Component} from 'react';
import {Badge, Col, Nav, NavItem, NavLink, Row, TabContent, TabPane} from 'reactstrap';
import classnames from 'classnames';
import MicrosoftLogin from "react-microsoft-login";

class StudentClassView extends Component {

  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      withUserData: true,
    };
  }

  loginHandler(err, data) {
    console.log("errrrrrrr",err, data);
  };

  render() {
    const { withUserData} = this.state;

    return (
      <div className="animated fadeIn">

        <MicrosoftLogin
          withUserData={withUserData}
          clientId={"MY CLIENT ID"}
          authCallback={this.loginHandler}
          graphScopes={["user.read"]} />

      </div>
    );
  }
}

export default StudentClassView;

[alexandrtovmach]

Thanks,

I've tested with provided code and seems like it works for me. Only one thing can be the problem:

Your link contains the "#", probably you try use route without it

[jmandivarapu1]

Awesome. you are correct # is a problem I removed it using BrowserRouter from react-dom and changed the redirect URL to http://localhost:3000/login and it worked like a charm.

Thank You for all your help.