Passing user information to react component after authentication

Question

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;
    }
}

Mosè Raguzzini · Accepted Answer · 2018-09-07 13:08:49Z

2

You have varioius choices, some of the most popular:

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

answered Sep 7, 2018 at 13:08

Mosè Raguzzini

15.9k1 gold badge34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sudi Over a year ago

Thank you so much. I am using Mobx store for storing user information. But my question basically is how should I get the user claims in the front end application. Is it a good idea to have a Auth controller and then get the information by calling this API in react.

Mosè Raguzzini Over a year ago

If you do SSR (server side rendering) you can actually print those credentials in a global constant object. If you do not do SSR you can fetch credentials after auth (or aggregated with auth credentials) and store it before bootstrapping the react app.

Sakhi Mansoor · Accepted Answer · 2018-09-07 14:20:33Z

0

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.

answered Sep 7, 2018 at 14:20

Sakhi Mansoor

8,1325 gold badges24 silver badges38 bronze badges

Collectives™ on Stack Overflow

Passing user information to react component after authentication

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related