Unable to implement authentication and authorization in ReactJS App using MS Azure AD or Database Lo-CodePudding

The

Index.tsx

const msalInstance = new PublicClientApplication(msalConfig); const container = document.getElementById("root"); const root = createRoot(container!); root.render( <React.StrictMode> <MsalProvider instance={msalInstance}> <App /> </MsalProvider> </React.StrictMode> ); module.hot?.accept();

App.tsx

import { Login } from './components/Login'; import Routers from './components/Router/Routers'; function App() { return ( <div> <AuthenticatedTemplate> <Routers /> </AuthenticatedTemplate> <UnauthenticatedTemplate> <Login /> </UnauthenticatedTemplate> </div> ); } export default App;

Routers.tsx:

function Routers() { return ( <div className="Routers"> <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/Home" element={<Home />} /> <Route path="/Login" element={<Login />} /> <Route path="/Logout" element={<SignOutButton />} /> </Routes> </BrowserRouter> </div> ); } export default Routers;

Login.tsx

const handleSignInUsingDatabase = (e) => { const data = { Email: email, Password: password, }; const url = "https://localhost:44304/api/Test/Login"; axios .post(url, data) .then((result) => { /* Some Code */ }) .catch((error) => { setLoginError(error.message); }); }; const handleSignInUsingAzureAD = (loginType) => { instance.loginRedirect(loginRequest).catch((e) => { console.log(e); }); };

Please suggest a way how these all things possible in a single App. Or let me know if I am on the wrong track.

Edited:

The main issue that we are facing is, we are unable to integrate this behavior. Unable to use JWT token logic with Azure AD and Database login. Also, when using database login the Home page is not opening.

CodePudding user response：

As I understand we have two user journeys here, first one where the user logs in with the username and password which gets matched using the local SQL DB. The second user journey is where you have the button, that calls instance.loginRedirect() method (present in your Login.tsx) to trigger the authentication flow with Azure AD. I don't see a reason why they would not work in this single app, as both are two separate user journeys. Is there a specific error which you get that is not allowing you to proceed with both these user journeys in this single app.

Also, you can refer to the following sample of implementing MSAL-React in your React App to handle the token acquisition piece.

CodePudding user response：

The thing you are missing here is an authorization server. Your app should contact the authorization server and the AS should be responsible for the proper handling of the authentication flow (e.g., redirect to Azure AD auth). After authentication, the authorization server should issue an access token that your app can use to call the API. The API can then contact the authorization server to validate the token (e.g., get the public key to verify the signature)

This creates a single service in your system that is responsible for authenticating users and issuing tokens. The authorization server can handle any type of authentication, so at a later time, you will be able to add even more authentication options (e.g. second-factor or passwordless solutions).

There are multiple implementations of authorization servers available out there — some open-source projects as well as paid solutions.