MGT Login control in SPFx

Proceeding with the appointments with the MGT (Microsoft Graph Toolkit) controls today I want to talk about the File List control.

I will not cover in detail the implementation, it’s not the scope of this post, if you’re wondering how to achieve all the steps to enable you to use MGT inside SPFx you can have a look at my previous post or have a look at the code of this sample here.

The Login control is used to enable the user to login/logout, to display the currently logged in user and also to display more info and with the control templates you can also display custom controls or informations.

In the sample I created for this post you can see the login button for each control instance I created in the page:

The controls display an already disabled sign in button because the login process start almost immediately, otherwise you would see a clickable button.

Once the control completed the sign in process you would see something like the following:

In the picture above I bet you already noticed that there are two controls with a different visualization, one is the ninja one which has only custom data and does not rely on the currently logged in user, aside of that there is also the “Full customization” one, which you will see in the code chapter, has every aspect customized as you can see from the picture.

By default the control offer also a flyout card when clicked:

As said before you can customize the control, in the following image I customized the flyout commands allowing a dummy “add friend” and “send message” buttons:

The code

To use the Login control you have to import it like the following:

import { Login, MgtTemplateProps } from '@microsoft/mgt-react';

NB : In this sample the MgtTemplateProps is used only for the custom template, if you’re not planning to define a custom template you can avoid importing the class.

The simplest way to use the control is:

<Login />

Other ways to use the control, as you can see from the pictures above and from the code sample, are the following.

Adding the presence to the avatar:

<Login showPresence={true} />

Using the loginView property you can specify which type of view you want to display:

<Login loginView='compact' />

The loginView property have three possible values and those are:

• avatar
• compact
• full

As said before you can define custom data to be displayed, for the ninja example I used the following:

<Login userDetails={{ displayName: 'I\'m a ninja!', department: 'Ninja Department', personImage: this._ninjaUserImage }}/>

Where the _ninjaUserImage is an image base64 string.

Other useful properties are the events that you can subscribe to and perform custom code, the available events are:

• loginInitiated
• loginCompleted
• loginFailed
• logoutInitiated
• logoutCompleted

Templating

MGT controls offer the ability to define a custom templates, for the Login control you can define it like the following:

<Login> <this.LoginTemplate template="signed-in-button-content"/> <this.LoginTemplate template="signed-out-button-content"/> <this.LoginTemplate template="flyout-commands"/> <this.LoginTemplate template="flyout-person-details"/></Login>

Where this.LoginTemplate is a function that renders the customized control, if you’re interested in knowing more is better if you take a look at the sample code here.

Conclusion

The MGT Login control is a quick and easy way to let your users perform sign in and allow them to have a little bit more personalized user experience.

Hope this helps!