React download file with token

If we are successfully logged in we are redirect to home page which we will protect with our higher order component later. We do not want to stay in the login page if we are already loggedIn. So add this componentWillMount method hook to prevent it. A higher order component is generally a function which takes in a component and return another enhanced component. Head here to learn more about them. In this lifeCycle hook we are first checking if we are loggedIn which check the token from the localStorage.

Then we are decoding the token so that we may set it to our state. If we failed to decode it so we will redirect to login page. Prerequesites Node. Tags: react auth. By default, this scope is automatically added in every application that's registered in the Azure portal. Read scope in order to list the user's email.

As you add scopes, your users might be prompted to provide additional consent for the added scopes. If you need help, want to report an issue, or want to learn about your support options, see Help and support for developers. If you'd like to dive deeper into JavaScript single-page application development on the Microsoft identity platform, see our multi-part scenario series:. Scenario: Single-page application.

Skip to main content. This browser is no longer supported. Download Microsoft Edge More info. Contents Exit focus mode.

Please rate your experience Yes No. Any additional feedback? Note If you're using Internet Explorer, we recommend that you use the loginRedirect and acquireTokenRedirect methods due to a known issue with Internet Explorer and pop-up windows. Submit and view feedback for This product This page. View all page feedback.

In this article. MSAL React. MSAL Browser. The Azure cloud instance in which your application is registered. For national clouds for example, China , you can find appropriate values in National clouds.

Set to one of the following options: If your application supports accounts in this organizational directory , replace this value with the directory tenant ID or tenant name for example, contoso. If your application supports accounts in any organizational directory , replace this value with organizations.

If your application supports accounts in any organizational directory and personal Microsoft accounts , replace this value with common. To restrict support to personal Microsoft accounts only , replace this value with consumers. The problem is, after downloading the file, it is corrupted. I'm downloading png files and pdf files. When I open the downloaded image, it says it's corrupted and downloaded pdf shows white background only.

How can I download a file correctly? As I am not able to add comments so posting as answer. I have tried the same thing and posted the question for same in this link. You are getting corrupted file because you are not receiving content as blob or arraybuffer. Stack Overflow for Teams — Collaborate and share knowledge with a private group.

Create a free Team What is Teams? Collectives on Stack Overflow. Learn more. How to download a file through an API in React? Ask Question. Asked 2 years, 6 months ago. Active 2 years, 6 months ago. Viewed 42k times.