CODEWITHSUNDEEP
c#reactjsasp.net-coreasp.net-core-webapi
Sudi
Sudi

Reputation: 23

Passing user information to react component after authentication

I am new to react and so this question might sound silly. I am developing a react application with back end as asp.net core. I want to have two roles in the application as role A and role B which I am setting up in AAD. After authentication I want the role of the user to be available to react component. What is the best way of passing this information or reading this information in front end may be inside a react component. DOM is getting rendered before I fetch the user information from controller.

I tried using mobx storage to store the data from controller. But the issue I am facing now is the DOM gets rendered before the call gets completed which I don't want. How can I wait for the api call to get completed before DOM is rendered?

Here ReactDOM.render does not wait for stores[USERSTORE].setRole() to complete. If I don't use async await I get promise pending and the response is undefined.

boot.tsx

 stores[USERSTORE].setRole();

 ReactDOM.render(
 <div>"Dome content"</div>,
 root
 );

service.ts

 const client = AxiosAuthClient.createClient('/api/auth');

 export const authService =
 {
  GetUserRole: async() => {
   const x = await client.get(`userinfo`);
   return x;
  },

  };

userstore.ts

  import { observable, action } from 'mobx';
  import { authService } from '../api/AuthService';
  import { AxiosResponse, AxiosError } from 'axios';

  export class UserStore {
  public constructor() {
   this.isApprover = false; 
   }

   @observable public isApprover: boolean = false;

   @action
   public setRole = () => {

   authService.GetUserRole()
    .then((res: AxiosResponse) => {
        this.setUserRole(res.data);

    })

    .catch((err: AxiosError) => {

        const response = err.response;
        console.log(response.data.errors)
    });

     }

    @action
    public setUserRole = (data : boolean) => {
    this.isApprover = data;
     }
    }

controller

[Route("api/auth")]
public class AuthController : Controller
{
    [HttpGet]
    [Route("userinfo")]
    public async Task<IActionResult> Index()
    {
        var result = await getrole();
        return Ok(result);
    }

    public async Task<bool> getrole()
    {
        return true;
    }
}

Upvotes: 1

Views: 1918

Answers (2)

Sakhi Mansoor
Sakhi Mansoor

Reputation: 8102

Store your critical data in localStorage rather than in redux. User credentials is critical data in our app. Upon browser refresh, our app's state gets initialized.

It's maybe required to you throughout in your app. So don't lose it in any case.

Upvotes: 0

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15831

You have varioius choices, some of the most popular:

  1. Use a global store like Redux (https://redux.js.org/)
  2. Store credentials in upper component (lift state up https://reactjs.org/docs/lifting-state-up.html)
  3. Store credential in localStorage (https://developer.mozilla.org/it/docs/Web/API/Storage/setItem)

Upvotes: 2

Related Questions