SAML configuration with authentik

[Pankaj Sangam]

I am developing an application in ReactJS which is SSO enabled; application is integrated with FireBase (as a service provider) and Authentik (as an idP) for SAML 2.0 enabled for SSO.

In the process, on user login SSO process is initiated from FireBase; I can see a valid and successful SAML response with valid values. How ever, on the UI I see error " Firebase: Unable to parse the SAML token. (auth/invalid-credential).  ".

Does any one suggest what could be the possible cause for this error?

For the reference; here's the snapshot of the user sign in code -- 

import { LOGOUT,LOGGEDIN, ISSIGNIN, _debug } from '../../constants';

import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

import "firebase/compat/auth";

import compatApp from "firebase/compat/app";

import { useNavigate, useLocation } from 'react-router-dom';

import { useDispatch, useSelector } from 'react-redux';

import { Button } from '@mui/material';

import { borrowerGetUserData } from "../../actions/borrower";

import { getAuth, signOut, GoogleAuthProvider, FacebookAuthProvider,EmailAuthProvider,PhoneAuthProvider, SAMLAuthProvider, signInWithPopup, linkWithPopup, signInWithCredential } from "firebase/auth";

import {  mongoborrowerGetUserData, mongoborrowerGetFinanceData } from '../../actions/borrower';

import { mongoborrowerPostUserData } from '../../actions/borrower';

import { getIdToken} from "firebase/auth";

var app

const firebaseConfig = _debug === 'development'

    ?{

      apiKey            : process.env.REACT_APP_GOOGLE_AUTH_API_KEY_UAT,

      authDomain        : process.env.REACT_APP_GOOGLE_AUTH_DOMAIN_UAT,

      projectId         : process.env.REACT_APP_GOOGLE_AUTH_PROJECTID_UAT,

      storageBucket     : process.env.REACT_APP_GOOGLE_AUTH_BUCKET_UAT,

      messagingSenderId : process.env.REACT_APP_GOOGLE_AUTH_MSG_SNDR_ID_UAT,

      appId             : process.env.REACT_APP_GOOGLE_AUTH_APP_ID_UAT,

      measurementId     : process.env.REACT_APP_GOOGLE_AUTH_MSRMT_ID_UAT,

      loglevel          : process.env.CONFIG_LOG_LEVEL

    }

    :{

        apiKey            : process.env.REACT_APP_GOOGLE_AUTH_API_KEY,

        authDomain        : process.env.REACT_APP_GOOGLE_AUTH_DOMAIN,

        projectId         : process.env.REACT_APP_GOOGLE_AUTH_PROJECTID,

        storageBucket     : process.env.REACT_APP_GOOGLE_AUTH_BUCKET,

        messagingSenderId : process.env.REACT_APP_GOOGLE_AUTH_MSG_SNDR_ID,

        appId             : process.env.REACT_APP_GOOGLE_AUTH_APP_ID,

        measurementId     : process.env.REACT_APP_GOOGLE_AUTH_MSRMT_ID,

        loglevel          : process.env.CONFIG_LOG_LEVEL

    };  

try {

  app = compatApp.app();

} catch (error) {

  app = compatApp.initializeApp(firebaseConfig);

}

const auth = compatApp.auth(app);

function SignInScreen() {

    const { bProfile,bProfileStatus } = useSelector((state)=>state.borrower);

    const { bfinancialProfile } = useSelector((state)=>state.borrower);

    const [isSignedIn, setIsSignedIn] = useState(false); // Local signed-in state.

   

    const dispatch = useDispatch();

    const navigate = useNavigate();

    const location = useLocation();

   

    console.log('location',location);

    const provider = new SAMLAuthProvider('saml.authentik-nf');

    console.log('provider',provider);

   

    const uiConfig = {

        signInFlow: 'popup',

        signInOptions: [

          provider.providerId

        ],

        callbacks: {

         

          signInSuccessWithAuthResult: async function(authResult, redirectUrl="/DashboardProfile") {

           const token= await getIdToken(user,true);

          sessionStorage.setItem('authToken', token);

            var email = (user.multiFactor.user.email) ? user.multiFactor.user.email : bProfile.emailId;

            var mno =  (user.multiFactor.user.phoneNumber) ? user.multiFactor.user.phoneNumber : bProfile.phoneNumber;

            console.log("get token from session storage",sessionStorage.getItem('authToken'));

          // send either email or phone number for new user registration

          if(user.multiFactor.user.email){

            var apiBodyData = {

              "data":{

              "isBorrower":true,

              "emailId": email,

              }

            }

          }else if(user.multiFactor.user.phoneNumber){

            var apiBodyData = {

              "data":{

              "isBorrower":true,

              "phoneNumber": mno,

              }

            }

          }

          console.log("apiBodyData",apiBodyData)

          dispatch(mongoborrowerPostUserData(apiBodyData));

            dispatch(mongoborrowerGetUserData(bProfile));

            dispatch(mongoborrowerGetFinanceData(bfinancialProfile));

            return true;

          },

        },

      };

     

    const logout = () => {

        auth.signOut()

        dispatch({ type: LOGOUT })

        navigate("/", { replace: true });

    };

   

      // Listen to the Firebase Auth state and set the local state.

    useEffect(() => {

      const unregisterAuthObserver = auth.onAuthStateChanged(user => {

        setIsSignedIn(!!user);

        user === null ? dispatch({ type: LOGOUT }) : dispatch({ type: LOGGEDIN });

      });

        return () => unregisterAuthObserver(); // Make sure we un-register Firebase observers when the component unmounts.

    }, []);

   

      if (!isSignedIn) {

        return (

          <div><StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} /></div>

        );

      }

      return (

        <div>

          <p>Welcome {auth.currentUser.displayName}! You are now signed-in!</p>

          {/* <a onClick={() => firebase.auth().signOut()}>Sign-out</a> */}

          {/* <a onClick={logout}>Sign-out</a> */}

   

          <Button variant="contained" sx={{p:'0.5vw', width:'8vw',ml:'.5vw',width:'6vw',fontSize:'0.7vw',backgroundColor:'#31312C',color:'#FFFFFF', "&.MuiButtonBase-root:hover": {

              backgroundColor:'#31312C',color:'#FFFFFF'

              } }} onClick={logout}>Sign-out</Button>

         

        </div>

      );

}

export default SignInScreen;