Skip to content

A wrapper around Microsofts MSAL library for react.

Notifications You must be signed in to change notification settings

rasheedaboud/Feliz.React.Msal

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Feliz.React.Msal

A wrapper around Microsofts MSAL library for react. This package can be used with Azure AD OR Azure B2C, simply change config object to refelct right endpoints. Here is a minimal repo showinf step by step how to get started using Feliz minimal template. It does assume you register you application in AD or B2C in advance.

Getting Started

  1. Install npm dependencies

    npm:

    dotnet add package Feliz.React.Msal
    npm install @azure/msal-react

    femto:

      femto install Feliz.React.Msal
  2. Initialize msal config (this is an example using B2C with sign in flow)

        open Feliz.React.Msal
    
        let msalConfig ={
            auth={
                  clientId=""
                  authority="https://<domain>.b2clogin.com/<domain>.onmicrosoft.com/<Sign in flow>"
                  knownAuthorities=[|"https://<domain>.b2clogin.com"|]
                  redirectUri= "https://localhost:8080/"
                  postLogoutRedirectUri = "https://localhost:8080/"};
            cache={cacheLocation="sessionStorage"; storeAuthStateInCookie=false}
          }
        let client:IPublicClientApplication = createClient msalConfig
        
        
  3. Pass client into msal component

        [<ReactComponent>]
        let App() =
            MsalProvider.create[
                MsalProvider.instance client
                MsalProvider.children[
                ]
            ]
             

Protecting sections of site

Use Authenticated/Unauthenticated template to show or hide sections of UI. Alternatively use useIsAuthenticated() hook if use if XXX then xxx else block to show or hide UI.

      AuthenticatedTemplate.create [
          AuthenticatedTemplate.children [
          ]
      ]

      UnauthenticatedTemplate.create [
          UnauthenticatedTemplate.children [
          ]
      ]
          

If you are using Elmish you will need to use the useEffect() react hook in conjuction with useIsAuthenticated() or useMsal() hooks to verify user is logged in and dispatch an event.

[<ReactComponent>]
let Component () =

    let client = useMsal()

    let isAuthenticated = useIsAuthenticated(None)

    //Dispatch you event here
    let someEffect() = async {
        if isAuthenticated then
            let account = client.accounts[0]
            setUser  Some account |> dispatch
        else 
            setUser  None |> dispatch
    }

    //Re runs effect isAuthenticated changes
    React.useEffect(someEffect >> Async.StartImmediate, [| box isAuthenticated |])

Hooks

Support for the following custon msal hooks are supported under the 'Hooks' module;

  1. useAccount
  2. useIsAuthenticated
  3. useMsal
  4. useMsalAuthentication

Links

  1. MSAL react library can be found on NPM.
  2. Microsoft github page for MSAL.
  3. Microsoft docs showing example usage of MSAL react library can be found here.

About

A wrapper around Microsofts MSAL library for react.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages