Hardt-Coded / Feliz.React.Msal

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Feliz.React.Msal

A wrapper around Microsofts MSAL library for react.

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 msal: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

      AuthenticatedTemplate.create [
          AuthenticatedTemplate.children [
          ]
      ]

      UnauthenticatedTemplate.create [
          UnauthenticatedTemplate.children [
          ]
      ]

Or use useIsAuthenticated() hook.

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


Languages

Language:F# 100.0%