SSO login with Azure AD using React JS

Question

I'm facing an issue with Cross-origin token redemption while developing a Single-Page Application (SPA). I'm getting the following error:

"Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type. Request origin: 'http://localhost:3000'."

My React JS App code

App.js

import logo from './logo.svg';
import './App.css';
import { config } from './Config';
import { PublicClientApplication } from '@azure/msal-browser';
import { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  constructor(props) {
    super(props);
    this. state = {
      error: null,
      isAuthenticated: false,
      user:{}
    }
    this.login = this.login.bind(this);
    this.publicClientApplication = new PublicClientApplication({
      auth: {
        clientId: config.appId,
        redirectUri: config.redirectUri,
        authority: config.authority
      }
    })
  }
  async login() {
    try {
      await this.publicClientApplication.loginPopup({
        scopes: config.scopes,
        prompt: "select_account"
      });
      this.setState({isAuthenticated:true})
    } catch (err) {
      this.setState({
        isAuthenticated: false,
        user: {},
        error: err
      })
    }
  }

  logout() {
    this.publicClientApplication.logout()
  }

  
render() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
        </a>
          {this.state.isAuthenticated ? <p>Learn React </p>:
          
          <p><button onClick={() => this.login()}>Login In</button></p> }
      </header>
    </div>
  );
}
}



export default App;

config.js

export const config = {
    appId:My_APP_ID,
    redirectUri: "http://localhost:3000",
    scopes: [
        'user.read'
    ],
    authority:"https://login.microsoftonline.com/My_APP_TENT_ID"
}

`

after login enter username password token api show 400 bad request

enter image description here

Please suggest me what's wrong above code. If did any mistake suggest me. Thanks in advance.

Answer 1

When you create an application, it's under redirect URI, I'm looking to see where I can find it for an existing application

You can also edit your manifest file for your application directly by adding redirect URIs:

    "replyUrlsWithType": [
        {
            "url": "http://localhost:3000",
            "type": "Spa"
        },
        ...other urls
    ],