I am trying to set up Microsoft Azure AD authentication, and I feel like I have filled everything out correctly (I wans't sure what to share regarding the keys and company name, so I wrote what's supposed to be there, rather than accidentally giving out confidential information). I keep getting a "empty_url_error" and this github link didn't give me much to work with.
My config.js
export const config = {
auth: {
clientId: "Application/Client ID",
authority: "https://login.microsoftonline.com/My tenant ID",
redirectUri: "https://localhost:3000",
},
cache: {
cacheLocation: "sessionStorage",
storeAuthStateInCookie: false,
}
};
export const loginRequest = {
scopes: ["Scope"]
};
My index.js
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { config } from '../config'
import { PublicClientApplication } from '@azure/msal-browser'
import { Component } from 'react'
import { Button } from 'flowbite-react'
class index 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.clientId,
redirectUri: config.redirectUri,
authority: config.authority
},
cache: {
cacheLocation: "sessionStorage",
storeAuthStateInCookie: false
}
});
}
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.logoutPopup();
}
render() {
return (
<div className={styles.container}>
<Head>
<meta charSet="UTF-8" />
<meta name="viewpoer" content='width=device-width, initial-scale=1.0' />
<meta httpEquiv='X-UA-Compatible' content='ie=edge' />
<title>Title</title>
<link rel='icon' type='image/x-icon' href='/images/favicon.ico'></link>
</Head>
{this.isAuthenticated ?
<p>Succesfully logged in</p>
:
<p><Button onClick={() => this.login()}>Log in</Button></p>
}
</div>
)
}
}
export default index;
I've looked through my files to find out where this URL could or should be, and I've tried different links in the authority field, and nothing changed.