Custom auth - problem with getcurrentUser and protected routes

NiviJah · August 5, 2020, 3:16pm

I’m implementing MSAL.js to make an Azure Active Directory login.
The login itself works great, im getting a successful handshake.
But i’m unable to protect routes, and for some reason, getcurrentUser isnot getting called at all.
In addition, when trying to go to a “protected route”, im getting http://localhost:8910/?redirectTo=/admin in the URL, and a blank white page.

im currently not trying to write or read anything from the db.

index.js

const msalConfig = {
  auth: {
    clientId: 'xxxx',
    authority:
      'xxxx',
    redirectUri: 'http://localhost:8910/admin',
  },
  cache: {
    cacheLocation: 'sessionStorage', // This configures where your cache will be stored
    storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
  },
}


const authClient = new Msal.UserAgentApplication(msalConfig)

ReactDOM.render(
  <FatalErrorBoundary page={FatalErrorPage}>
    <AuthProvider client={authClient} type="custom">
      <RedwoodProvider>
          <Routes />
      </RedwoodProvider>
    </AuthProvider>
  </FatalErrorBoundary>,
  document.getElementById('redwood-app')

api/src/lib/auth.js

export const getCurrentUser = async (decoded, { type, token }) => {
  console.log('get user') // < not called
}

node_modules/@redwoodjs/auth/dist/authClients/custom.js
“use strict”;

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.custom = void 0;

var custom = function custom(authClient) {
  return {
    type: 'custom',
    client: authClient,
    // restoreAuthState: async () => {
    //   window.history.replaceState(
    //     {},
    //     document.title,
    //     '/admin'
    //   )
    // },
    login: function login() {
       var loginRequest = {
    scopes: ['openid', 'profile', 'User.Read'],
  }
console.log('login')
authClient
      .loginPopup(loginRequest)
      .then((loginResponse) => {
        console.log('id_token acquired at: ' + new Date().toString())
        console.log('loginResponse', loginResponse)

        if (authClient.getAccount()) {
          console.log(authClient.getAccount()) // << working
        }
      })
      .catch((error) => {
        console.log(error)
      })
    },
    logout: function logout() {
console.log('log out')
authClient.logout() // << working
    },
    getToken: function () {
console.log('get token')
return 'string'
    }(),
    getUserMetadata: function () {
console.log('getUserMetadata')
  return authClient.getAccount() || null
    }()
  };
};

exports.custom = custom;

dthyresson · August 5, 2020, 3:32pm

@NiviJah Hi.

Does your api graphql function include getCurrentUser in createGraphQLHandler?

export const handler = createGraphQLHandler({
  getCurrentUser,
schema: makeMergedSchema({
    schemas,
    services: makeServices({ services }),
  }),
  db,
})

NiviJah · August 5, 2020, 4:27pm

yes

api/src/functions/graphql.js

import {
  createGraphQLHandler,
  makeMergedSchema,
  makeServices,
} from '@redwoodjs/api'
import importAll from '@redwoodjs/api/importAll.macro'

import { getCurrentUser } from 'src/lib/auth.js'

import { db } from 'src/lib/db'

const schemas = importAll('api', 'graphql')
const services = importAll('api', 'services')

export const handler = createGraphQLHandler({
  schema: makeMergedSchema({
    schemas,
    services: makeServices({ services }),
  }),
  getCurrentUser,
  db,
})

danny · August 6, 2020, 1:04pm

It looks like your redirect is coming from MSAL.

Here’s my suggestion

Setup auth with redwood following this guide https://redwoodjs.com/tutorial/authentication. Don’t include MSAL just yet.
Try to move your setup to use custom auth (no need for a db, just change the providers, and update your getCurrentUser function)
Once you have an understanding of how redwood is doing auth, then add your MSAL code

PS it looks like you copied the code from my old forum post on custom github auth. Please note that you don’t need to modify node_modules anymore.

NiviJah · August 6, 2020, 1:27pm

appreciate your answer @danny

I already successfully implemented auth0
getCurrentUser is not being called at all
I don’t believe the redirect is coming from MSAL, every “protected route” I enter in the url is being replaced with ?redirectTo=/pageName and a blank page

danny · August 6, 2020, 2:23pm

Just FYI getCurrentUser is only called from services i.e. the api side, not on the frontend. And potentially when passing the auth token, and the auth-provider header. (not 100% sure, haven’t looked at it in a while)

Maybe this’ll help?

If you look at your MSAL config you have this line: redirectUri: 'http://localhost:8910/admin',

Update: RW Does have redirectTo now, however the problem would look to me to still be in auth client setup as peterp suggest below

peterp · August 7, 2020, 7:43am

I think the problem is here:

You’re passing the raw “authClient” to redwood without mapping the values. You’ll need to map the “shape” of Msal to match that which Redwood expects, what I mean by this is that Redwood expects your client object to have the following named functions that return the correct values:

github.com

redwoodjs/redwood/blob/3614b6d4cf577f7840d0ba2fc80975a258326c5f/packages/auth/src/authClients/index.ts#L40-L49


      
          export interface AuthClient {
            restoreAuthState?(): void | Promise<any>
            login(options?: any): Promise<any>
            logout(options?: any): void | Promise<void>
            getToken(): Promise<null | string>
            /** The user's data from the AuthProvider */
            getUserMetadata(): Promise<null | SupportedUserMetadata>
            client: SupportedAuthClients
            type: SupportedAuthTypes
          }

You can see the implementation of various other clients over here: https://github.com/redwoodjs/redwood/tree/main/packages/auth/src/authClients

As an example; if new Msal returns an object that has a LogInWithPopUp method, you would have to map this method like this:

const originalAuthClient = new Msal.UserAgentApplication(msalConfig)

const myAuthClient = {
    type: 'custom',
    client: originalAuthClient,
    login: originalAuthClient.LogInWithPopUp,
   /* ...  implement getToken, logout, getUserMetadata */
}

NiviJah · August 7, 2020, 11:50am

Thank you !
that’s something I haven’t tried before.
will update

NiviJah · August 7, 2020, 2:01pm

Trying to keep stuff as simple as possible,
still getting null data, do I need to implicitly set isAuthenticated somehow ?

web/src/index.js
const authClient = new Msal.UserAgentApplication(msalConfig)

const getMSALAccount = () => {
  if (authClient.getAccount()) {
    return authClient.getAccount()
  }
}

const MSALAuthClient = {
  type: 'custom',
  client: authClient,
  login: () => authClient.loginRedirect(loginRequest),
  logout: () => authClient.logout(),
  getToken: () => getMSALAccount,
  getUserMetadata: () => getMSALAccount,
}

ReactDOM.render(
  <FatalErrorBoundary page={FatalErrorPage}>
    <AuthProvider client={MSALAuthClient} type="custom">

node_modules/@redwoodjs/auth/dist/authClients/custom.js
_Object$defineProperty(exports, “__esModule”, {
value: true
});

exports.custom = void 0;

var custom = function custom(MSALAuthClient) {
  return {
    type: 'custom',
    client: MSALAuthClient,
    login: () => MSALAuthClient.login(),
    logout: () => MSALAuthClient.logout(),
    getToken: () => MSALAuthClient.getToken(),
    getUserMetadata: () => MSALAuthClient.getUserMetadata(),
  }
}

exports.custom = custom;

peterp · August 7, 2020, 2:05pm

This code doesn’t look correct. You “if block” is executing the function. Also, isn’t getAccount() a promise?

NiviJah · August 7, 2020, 2:21pm

This was taken from the docs, looks like the official way to do it

I am not sure if thats a promise or not.

peterp · August 7, 2020, 2:41pm

Ah, well, looking at those same docs they reference: myMSALObj.loginPopup(loginRequest) which is a promise; is myMSALObj.login also valid?

dthyresson · August 7, 2020, 2:45pm

@peterp I wonder if there should be a new topic/thread/GH issue where we track other AuthProviders to support out of the box based on what the community needs.

For example:

AAD
Apple
Twitter
etc

… or a more generic OAuth similar to NextAuth.js?

NextAuth.js includes built-in support for signing in with Apple, Auth0, Google, Battle.net, Box, AWS Cognito, Discord, Facebook, GitHub, GitLab, Google, Open ID Identity Server, Mixer, Okta, Slack, Spotify, Twitch, Twitter and Yandex.

NiviJah · August 7, 2020, 2:48pm

I feel like MSAL.js specially should have been super easy
the handshake itself works great, super straightforward and minimal code.
it’s the integrations with RW i’m struggling with

NiviJah · August 7, 2020, 3:11pm

some refactoring

const authClient = new Msal.UserAgentApplication(msalConfig)

const makeLogin = () => {
  authClient
    .loginPopup(loginRequest)
    .then((loginResponse) => {
      console.log('loginResponse', loginResponse)
      // navigate(routes.admin())
    })
    .catch(function (error) {
      console.log(error)
    })
}

const getMSALAccount = async function (authClient) {
  const data = await authClient.getAccount()
  console.log('data', data)
  return data
  // return authClient.getAccount() || 'no data returned'
}

const MSALAuthClient = {
  type: 'custom',
  client: authClient,
  login: () => makeLogin(),
  logout: () => authClient.logout(),
  getToken: getMSALAccount(authClient),
  getUserMetadata: getMSALAccount(authClient),
}

ReactDOM.render(
  <FatalErrorBoundary page={FatalErrorPage}>
    <AuthProvider client={MSALAuthClient} type="custom">

node_modules/@redwoodjs/auth/dist/authClients/custom.js

var custom = function custom(MSALAuthClient) {
  return {
    type: 'custom',
    client: MSALAuthClient,
    login: () => MSALAuthClient.login(),
    logout: () => MSALAuthClient.logout(),
    getToken: MSALAuthClient.getToken,
    getUserMetadata: MSALAuthClient.getUserMetadata,
  }
}

exports.custom = custom;

VinayaSathyanarayana · May 11, 2021, 2:51am

Supporting next-auth will be great