Get Current User Details in Lightning Web Components

If you are a Salesforce developer or Admin the word hearing you most is Lightning Web Components (LWC). So today we will check how we can get Current User Id in Lightning Web Components. Finally using this Id we will fetch the user details and show them on UI. We will also do the same thing in Lightning so you can get the idea of both and can compare them side by side.

If you still don’t have an idea of what they are, then you should check my post in which I have explained Lightning Web Component and also created a few sample Lightning Web Component.

Lightning web component provides us a way to get user information without apex. So to get information about the current user, use the @salesforce/user scoped module. First we will import user/Id and then we will use it in our code.

import { LightningElement, wire } from 'lwc';
import getUserInfo from '@salesforce/apex/UserDetails.getUserInfo';
import Id from '@salesforce/user/Id';

export default class LwcUserDetail extends LightningElement {

    @wire(getUserInfo, { userId: Id }) 
    userData;
}

Using the wire we call the apex method and then bind the result with userData parameter. So as you can see we get Current User Id in Lightning Web Components using a single line of code.

Get Current User Id in Lightning

For instance, if we want to get current User Id in Lightning then we don’t need to do the import. Instead, we will use $SObjectType Global variable and get the Id.

({
    init : function(component, event, helper) {
        var cuUserId = $A.get("$SObjectType.CurrentUser.Id");
        var action = component.get("c.getUserInfo");
        action.setParams({
            userId : cuUserId,
        });

        action.setCallback( this, function(response){
            if(response.getState() === 'SUCCESS') {
               component.set("v.currentUser", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    }
})

So using $A.get("$SObjectType.CurrentUser.Id"); we can get the current user Id in Lightning.

Now in the UI both have different format. In lightning we use {!} expressions

<aura:application controller="UserDetails" extends="force:slds">
    <aura:attribute name="currentUser" type="User" default="{'sObjecttype': 'User'}" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <lightning:card title="User Details in Lightning" iconName="action:user">
            {!v.currentUser.Name} <br/>
            {!v.currentUser.Title}<br/>
            {!v.currentUser.Profile.Name}<br/>
        </lightning:card>

   <c:lwcUserDetail />
</aura:application>	

While in Lightning Web Component we follow “-” (kebab case) in attribute naming conventions.

<template>
    <lightning-card title="User Details in LWC" icon-name="action:user">
            <template if:true={userData.data}>
                {userData.data.Name}<br/>
                {userData.data.Title}<br/>
                {userData.data.Profile.Name}  
            </template>
            <template if:true={userData.error}>
                {userData.error}
            </template>
    </lightning-card>
</template>

So we can see that syntax is different. Although both have similar attributes. So if you are planning to move your existing code into LWS then you can start by one component at a time.

You can also find complete code on my github-repo.

Do you want to add anything, let me know in comments. Happy programming 🙂