Using react-adal with Server Side Rendering(Next.js)

[M0W93]

Hello,
actually im trying to use react-adal with Next.js, but because of the ´window´ reference in the library it isn't possible to use it with SSR.

Correct me if im wrong but isn't it insecure to deliver the whole adalConfig (with clientId) to the browser?

[salvoravida]

no because clientId si just tell MS azure which AzureWebApp is going to login. there is no other way. authentication is from user pc to Azure not your server to Azure - it is a SPA application

[salvoravida]

hum, if your full app is protected under login, it is unuseful to render before login.

anyway if your app has just only a private section, then probably i will update the lib with a check on window object

[salvoravida]

@M0W93 try v0.4.23

please share feedback if it is ok on SSR

[M0W93]

Thanks a lot for your effort.
I will try this out later and will give you a feedback.

[M0W93]

Hello @salvoravida,
i tried the new react-adal version but get the following error:

window._adalInstance = this;
  ^

ReferenceError: window is not defined

on react-adal/lib/adal.js:141

[salvoravida]

@M0W93 try 0.4.24
please share feedback if it is ok on SSR

[saostad]

Hi, I tried to use it in my sample app but I am not sure how to set it up?
I am using next.js@8.1.0 and react-adal@0.4.24
Error:

TypeError: authContext.acquireToken is not a function
    at C:\Users\SOstad\Projects\tests\with-ant-design-app\node_modules\react-adal\lib\react-adal.js:53:17
    at new Promise (<anonymous>)
    at adalGetToken (C:\Users\SOstad\Projects\tests\with-ant-design-app\node_modules\react-adal\lib\react-adal.js:52:10)
    at new _temp (C:\Users\SOstad\Projects\tests\with-ant-design-app\node_modules\react-adal\lib\react-adal.js:141:9)
    at processChild (C:\Users\SOstad\Projects\tests\with-ant-design-app\node_modules\react-dom\cjs\react-dom-server.node.development.js:2846:14)
    at resolve (C:\Users\SOstad\Projects\tests\with-ant-design-app\node_modules\react-dom\cjs\react-dom-server.node.development.js:2812:5)
    at ReactDOMServerRenderer.render (C:\Users\SOstad\Projects\tests\with-ant-design-app\node_modules\react-dom\cjs\react-dom-server.node.development.js:3202:22)
    at ReactDOMServerRenderer.read (C:\Users\SOstad\Projects\tests\with-ant-design-app\node_modules\react-dom\cjs\react-dom-server.node.development.js:3161:29)
    at renderToString (C:\Users\SOstad\Projects\tests\with-ant-design-app\node_modules\react-dom\cjs\react-dom-server.node.development.js:3646:27)
    at render (C:\Users\SOstad\Projects\tests\with-ant-design-app\node_modules\next-server\dist\server\render.js:86:16)
    at renderPage (C:\Users\SOstad\Projects\tests\with-ant-design-app\node_modules\next-server\dist\server\render.js:211:20)
    at Function.value (C:\Users\SOstad\Projects\tests\with-ant-design-app\.next\server\static\development\pages\_document.js:555:41)
    at Object.loadGetInitialProps (C:\Users\SOstad\Projects\tests\with-ant-design-app\node_modules\next-server\dist\lib\utils.js:42:35)
    at Object.renderToHTML (C:\Users\SOstad\Projects\tests\with-ant-design-app\node_modules\next-server\dist\server\render.js:218:36)
    at processTicksAndRejections (internal/process/task_queues.js:89:5)

My Component Code:

import React from "react";
import { withAdalLoginApi } from "./adalConfig";

function IndexComponent() {
  return (
    <div style={{ marginTop: 100 }}>
      <h1>Hello</h1>
    </div>
  );
}

export default withAdalLoginApi(IndexComponent, IndexComponent, IndexComponent);

[salvoravida]

@saostad it should be fixed on v0.5.0

let me know your feedback!

[apatel6152]

React adal latest version is not compatible with react 18 right?