If you’re new to SharePoint Framework (SPFx) or just starting to build the web parts, one of the first things you need to know is how to get the current logged-in user’s information in SharePoint Online. Refer to the image below:
In this article, you’ll learn how to fetch and display details such as the current user’s name, email, and more.
Create an SPFx Webpart to Display Current Logged-in Information
In the SharePoint Framework (SPFx), every web part or extension runs within a SharePoint context. That context gives us all the information about the current environment, the user, the site, the web, and even the list or list item where the webpart is placed.
This context is available through this.context.pageContext object. This is a built-in object; you don’t need to make any extra API calls to get these details. SPFx provides them by default.
Follow the steps below to create an SPFx webpart that will display the current logged-in information.
- Open the command prompt. Create a directory for the SPFx solution and navigate to it.
md GetCurrentUserDetails
cd GetCurrentUserDetails- Run Yeoman SharePoint Generator to create the solution.
yo @microsoft/sharepoint- Yeoman generator will present you with a wizard that asks questions about the solution to be created.
- What is your solution name? get-current-user-details
- Which type of client-side component to create? WebPart
- Add new Web part to solution get-current-user-details.
- What is your Web part name? GetCurrentUserDetails
- Which template would you like to use? React
- Once the solution is created successfully, run the command below to open the code in Visual Studio Code.
code .- You can see the folder structure of the SPFx solution we created above in the image below.
- Under src->webparts->getCurrentUserDetails->components. You’ll find the following key files:
- GetCurrentUserDetails.module.scss: Contains the CSS styles used to style the React component.
- GetCurrentUserDetails.tsx: The main React component file that defines how the webpart looks and behaves on the page.
- GetCurrentUserDetailsProps.ts: Defines the props passed from the webpart to the React component.
- GetCurrentUserDetailsWebPart.ts: The main entry point for the web part. It initialises the web part, sets up the context, and passes the required props to the React component.
- Under src->webparts->getCurrentUserDetails->components. You’ll find the following key files:
In the above image, you can see that the “GetCurrentUserDetailsWebPart.ts” file contains userDisplayName: this.context.pageContext.user.displayName, here:
- userDisplayName = It is a prop we are sending to the React component.
- this.context.pageContext.user.displayName:
- this = It refers to the current webpart.
- context = Provides access to the SharePoint Framework context.
- pageContext = A property inside the “context “that stores all page-related information.
- user = An object inside the “pageContext “that contains details of the currently logged-in user.
- displayName = A property inside the “user “object, which gives the user’s full name.
I hope you understand how to get the current logged-in user name from the page context object, which SPFx provides by default.
- In the image below, you can see what other user information we can get from “this.context.pageContext.user”
- email = It gives the user’s email address.
- isAnonymousGuestUser = Shows true if the user is an anonymous visitor or not signed in, otherwise false.
- isExternalGuestUser = Show true if the user is an external guest user, otherwise false.
- loginName = It gives the login name.
- preferUserTimeZone = Returns true if the user prefers to see times in their own time zone setting, otherwise false.
Let’s see how to display the current logged-in user information in the web part now!
- Open the “GetCurrentUserDetailsProps.ts” and update the default code with the code below. Here, we additionally added some user information props that we discussed above.
export interface IGetCurrentUserDetailsProps {
description: string;
isDarkTheme: boolean;
environmentMessage: string;
hasTeamsContext: boolean;
userDisplayName: string;
email : string;
isAnonymousGuestUser : boolean;
isExternalGuestUser : boolean;
loginName : string;
preferUserTimeZone : boolean;
}- Then, open “GetCurrentUserDetailsWebPart.ts” and update the render() method as shown below. Here, we are assigning the current logged-in user’s info to the props we created in the section above.
So in the .tsx file, we can easily access these props to display in the webpart.
public render(): void {
const element: React.ReactElement<IGetCurrentUserDetailsProps> = React.createElement(
GetCurrentUserDetails,
{
description: this.properties.description,
isDarkTheme: this._isDarkTheme,
environmentMessage: this._environmentMessage,
hasTeamsContext: !!this.context.sdks.microsoftTeams,
userDisplayName: this.context.pageContext.user.displayName,
email: this.context.pageContext.user.email,
isAnonymousGuestUser: this.context.pageContext.user.isAnonymousGuestUser,
isExternalGuestUser: this.context.pageContext.user.isExternalGuestUser,
loginName: this.context.pageContext.user.loginName,
preferUserTimeZone: this.context.pageContext.user.preferUserTimeZone
}
);
ReactDom.render(element, this.domElement);
}- Now, open the “GetCurrentUserDetails.tsx” file and replace your code with the code below.
import * as React from 'react';
import styles from './GetCurrentUserDetails.module.scss';
import type { IGetCurrentUserDetailsProps } from './IGetCurrentUserDetailsProps';
import { escape } from '@microsoft/sp-lodash-subset';
export default class GetCurrentUserDetails extends React.Component<IGetCurrentUserDetailsProps> {
public render(): React.ReactElement<IGetCurrentUserDetailsProps> {
const {
description,
isDarkTheme,
environmentMessage,
hasTeamsContext,
userDisplayName,
email,
isAnonymousGuestUser,
isExternalGuestUser,
loginName,
preferUserTimeZone
} = this.props;
return (
<section className={`${styles.getCurrentUserDetails} ${hasTeamsContext ? styles.teams : ''}`}>
<div className={styles.welcome}>
<img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
<h2>Well done, {escape(userDisplayName)}!</h2>
<div>{environmentMessage}</div>
<div>Web part property value: <strong>{escape(description)}</strong></div>
</div>
{/* User Info Card */}
<div className={styles.userCard}>
<h2>Current User Details</h2>
<div className={styles.userInfo}>
<p><strong>Name:</strong> {escape(userDisplayName)}</p>
<p><strong>Email:</strong> {email || "—"}</p>
<p><strong>Login Name:</strong> {escape(loginName)}</p>
<p><strong>Anonymous Guest:</strong> {isAnonymousGuestUser ? "Yes" : "No"}</p>
<p><strong>External Guest:</strong> {isExternalGuestUser ? "Yes" : "No"}</p>
<p><strong>Prefers User Time Zone:</strong> {preferUserTimeZone ? "Yes" : "No"}</p>
</div>
</div>
</section>
);
}
}Here:
- We imported the props using this statement: “import type { IGetCurrentUserDetailsProps } from ‘./IGetCurrentUserDetailsProps’“
- Using this.props, we accessed the props and kept them in the const, within the render() method.
- Then, we displayed those props within the <p></p> tags.
- Add the styles below to your “GetCurrentUserDetails.module.scss” file.
/* Card Styles */
.userCard {
background-color: #d4eddac3; /* light green */
border: 1px solid #c3e6cb;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
max-width: 420px;
margin: 15px auto; /* reduced top margin */
padding: 20px;
text-align: left;
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: flex;
flex-direction: column;
justify-content: center; /* vertically centers content */
&:hover {
transform: translateY(-3px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
h2 {
text-align: center;
color: #0b0e10;
margin: 0 0 15px 0; /* reduced top margin */
font-weight: 600;
}
.userInfo {
p {
font-size: 16px;
margin: 8px 0;
line-height: 1.5;
strong {
color: #201f1e;
width: 180px;
display: inline-block;
}
}
}
}- To test this webpart locally, provide your SharePoint site url in the “serve.json” file to the “initialPage” parameter. Then run the command below in the Terminal pane or the command prompt where your solution is open.
gulp serveThen, in the local workbench url, you’ll see the webpart as shown below, which is displaying the properties that we added in the above sections.
This way, we can display the current user name and other details in the SPFx webpart, without performing any API calls or REST calls.
- If you want to display a welcome message with the current user name and current date, as shown below, update your .tsx file with the code below.
import * as React from 'react';
import styles from './GetCurrentUserDetails.module.scss';
import type { IGetCurrentUserDetailsProps } from './IGetCurrentUserDetailsProps';
import { escape } from '@microsoft/sp-lodash-subset';
export default class GetCurrentUserDetails extends React.Component<IGetCurrentUserDetailsProps> {
// Function to format current date
private getFormattedDate(): string {
const today = new Date();
const options: Intl.DateTimeFormatOptions = { day: '2-digit', month: 'long', year: 'numeric', weekday: 'long' };
return today.toLocaleDateString('en-US', options);
}
public render(): React.ReactElement<IGetCurrentUserDetailsProps> {
const {
description,
isDarkTheme,
environmentMessage,
hasTeamsContext,
userDisplayName,
email,
isAnonymousGuestUser,
isExternalGuestUser,
loginName,
preferUserTimeZone
} = this.props;
return (
<section className={`${styles.getCurrentUserDetails} ${hasTeamsContext ? styles.teams : ''}`}>
<div className={styles.welcome}>
<img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
<h2>Well done, {escape(userDisplayName)}!</h2>
<div>{environmentMessage}</div>
<div>Web part property value: <strong>{escape(description)}</strong></div>
</div>
<h1 className={styles.Heading}>
👋 Hello {escape(userDisplayName)}! Today is {this.getFormattedDate()} 🎉
</h1>
{/* User Info Card */}
<div className={styles.userCard}>
<h2>Current User Details</h2>
<div className={styles.userInfo}>
<p><strong>Name:</strong> {escape(userDisplayName)}</p>
<p><strong>Email:</strong> {email || "—"}</p>
<p><strong>Login Name:</strong> {escape(loginName)}</p>
<p><strong>Anonymous Guest:</strong> {isAnonymousGuestUser ? "Yes" : "No"}</p>
<p><strong>External Guest:</strong> {isExternalGuestUser ? "Yes" : "No"}</p>
<p><strong>Prefers User Time Zone:</strong> {preferUserTimeZone ? "Yes" : "No"}</p>
</div>
</div>
</section>
);
}
}Here, we have added a helper function, “getFormattedDate()”, that formats the current date to the “24 October 2025 Friday” format. Then, using the h1 tag, we’re displaying that message.
- To apply styles to that heading, add the following styles to the .scss file.
.Heading {
text-align: center;
font-size: 1.5em;
margin: 1em 0;
color: #0078d4; // nice MS blue
background: linear-gradient(90deg, #e0f3ff, #ffffff);
padding: 1em;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}This way, we can easily get the current user information and display it in the SPFx webpart. If you want to fetch details beyond this, we need to make API calls, either using PnPJS or Microsoft Graph.
I hope you found this article helpful! In this article, I explain how to retrieve and display the current user’s information in the SPFx webpart. Additionally, display a welcome message with the current user name along with the current date. You can follow this article if you’re also looking for how to get user info in SPFx.
Also, you may like:
- Display SharePoint List Items in a SPFX Web Part
- Add Bootstrap to SharePoint SPFx Webpart
- Retrieve Current User Information in SPFx Web Part using Graph API
- Microsoft Graph API in SPFx Web Parts
After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.
