CODEWITHSUNDEEP
reactjsazureazure-functionsauth0
reactinretrograde
reactinretrograde

Reputation: 11

Storage Account app authentication through Azure Function and auth0

I have just started using Azure services as a student assistant - what I want to achieve is to hook up an Azure Storage Account which serves a React application, with a Function App that provides to it not only API capabilities but also auth0 as an authentication provider accessed from the React application.

What I have up until now is a working and deployed React app, a published API that incorporates auth0 - I have set it up in such a way with a config file by following the Microsoft docs so that when one accesses it they get prompted with the auth0 login screen. However that works only when it is published, nothing locally whatsoever.

Now I am trying to access the published API link from the React app locally by using the Auth0Provider from the auth0-react lib:

<Auth0Provider
        domain="domain"
        clientId="clientid"
        redirectUri="https://api.azurewebsites.net/.auth/login/auth0/callback">
    <Login />
</Auth0Provider>

Login contains:

const { loginWithRedirect, user, logout } = useAuth0()

    return (
        <>
            <Button onClick={() => loginWithRedirect()}>Log In</Button>
            <Button onClick={() => logout()}>Log Out</Button>
        </>
    )

However when logging in, one gets prompted with the auth0 screen though on input gets redirected to the callback of https://api.azurewebsites.net/.auth/login/auth0/callback and not to the one I also provided in the settings of the app on auth0 dashboard e.g. http://localhost:8000/.auth/login/auth0/callback. This gets me a 500 HTTP error. What I want is to be logged in and to be able to get the Client Principal like presented in the Microsoft docs. So in that way, I guess I would like user authorization to be managed both by Azure and auth0 working behind the scenes.

After that convoluted ride, my questions are about how can I redirect the user to localhost:8000 ( is that even feasible? ) and is the login flow realistic? If yes, it would be amazing if one could give me a few ideas on how can I achieve that.

Upvotes: 1

Views: 189

Answers (1)

SauravDas-MT
SauravDas-MT

Reputation: 1444

Auth0 allows us to put on authentication to our React application quickly and to gain access to user profile information.

A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated. The callback URL for your app must be added to the Allowed Callback URLs field in your Application Settings. If this field is not set, users will be unable to log in to the application and will get an error.

In your case you should set the Allowed Callback URL to http://localhost:8000.

You can check this example for more information.

Since you are initiating login by calling loginWithRedirect. User is, after succesful authentication, redirected back to the provided redirectUri in Auth0Provider. That's why you were getting redirected to the callback of:

https://api.azurewebsites.net/.auth/login/auth0/callback.

You have to change it to get your desired result. Check this Auth0 document for more information, where every component of Auth0Provider is explained.

Upvotes: 1

Related Questions