Authorization on request

[igvnv]

Hi Luke! Thank you for your solution.

I faced a problem that using <AuthProvider /> forces application to auth, but in some cases I need to display a welcome page for unauthorized users.

Is it possible to get auth state outside of AuthProvider and start authentication process on user action (e.g. click on login button)?

Or have forceLogin property similar to react-aad-msal package. Something like:

import { AuthProvider, AuthProviderState, login } from './authentication/Msal';

ReactDOM.render(
  <AuthProvider forceLogin={false} render={({ state }) => {
    switch (state) {
      case AuthProviderState.Unauthenticated:
        return <button onClick={login}>Login</button>;
      case AuthProviderState.Success:
        return <App />;
    }
  }} />
);

[lukezirngibl]

Hey @igvnv, couldn't you have the login button at route /login and the authenticated app at route /app, and just have the login button link to the /app route?

[igvnv]

On main page (/) I need to check if user is authorized. I could use the useAccount hook, but it doesn't work outside of AuthProvider. If I wrap main page in AuthProvider, it will lead to force login.

My app is for authenticated users only but it is a good UX practice to show to users what app are they going to use. Silent redirect can lead to misunderstanding.