Problem with auth/callback when next.js app deployed on Azure app service

[GrzegorzCzm]

Question 💬

Hi,

I am trying to make working next-auth when deploying my Next.js app on Azure app service. Locally everything works fine.
My settings for next-auth

OIDC provider like:

{
      clientId: 'react',
      id: 'oidc-custom',
      name: 'oidc-custom',
      type: 'oauth',
      idToken: true,
      // @ts-ignore
      wellKnown: `${ACCOUNT_API_URL}/.well-known/openid-configuration`,
      // @ts-ignore
      clientSecret: CLIENT_APP_CODE,
      authorization: {
        // @ts-ignore
        url: `${ACCOUNT_API_URL}/connect/authorize`,
        params: {
          scope: 'openid email profile roles',
          prompt: 'login',
          // @ts-ignore
          redirect_uri: `${NEXTAUTH_URL}/api/auth/callback/oidc-custom` //I have tried also without this redirect_uri
        }
      },

package.json

  "main": "server.js",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "build:qa": "cross-env NODE_ENV=production BUILD_ENV=qa next build",
    "build:production": "cross-env NODE_ENV=production BUILD_ENV=production next build",
    "start": "cross-env NEXTAUTH_URL=https://MY-APP-qa-next.azurewebsites.net node server.js",
  },
  "dependencies": {
    "next": "^12.0.7",
    "next-auth": "^4.0.5",
  }

server.js

const { createServer } = require('http');
const next = require('next');

const port = process.env.PORT || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    handle(req, res);
  }).listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on <http://localhost>:${port}`);
  });
});

web.config

<?xml version="1.0" encoding="utf-8"?>
<!--
     This configuration file is required if iisnode is used to run node processes behind
     IIS or IIS Express.  For more information, visit:

     <https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config>
-->

<configuration>
  <system.webServer>
    <!-- Visit <http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx> for more information on WebSocket support -->
    <webSocket enabled="false" />
    <handlers>
      <!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
      <add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
    </handlers>
    <rewrite>
      <rules>
        <!-- Do not interfere with requests for node-inspector debugging -->
        <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="^server.js\\/debug[\\/]?" />
        </rule>

        <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
        <rule name="StaticContent">
          <action type="Rewrite" url="public{REQUEST_URI}"/>
        </rule>

        <!-- All other URLs are mapped to the node.js site entry point -->
        <rule name="DynamicContent">
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
          </conditions>
          <action type="Rewrite" url="server.js"/>
        </rule>
      </rules>
    </rewrite>

    <!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
    <security>
      <requestFiltering>
        <hiddenSegments>
          <remove segment="bin"/>
        </hiddenSegments>
      </requestFiltering>
    </security>

    <!-- Make sure error responses are left untouched -->
    <httpErrors existingResponse="PassThrough" />

    <!--
      You can control how Node is hosted within IIS using the following options:
        * watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
        * node_env: will be propagated to node as NODE_ENV environment variable
        * debuggingEnabled - controls whether the built-in debugger is enabled

      See <https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config> for a full list of options
    -->
    <iisnode watchedFiles="web.config;*.js"/>
  </system.webServer>
</configuration>

In general web.config and server.js are taken from
https://github.com/MRCollective/nextjs-server-azuresiteextension/tree/master/Next.js/files

How to reproduce ☕️

So after deployment to azure app service next.js is working fine (pages, SSR, rewrites, i18n), but when I am trying to login then I have flow like

https://MY-APP--qa-api.azurewebsites.net  - backend endpoint with oidc
https://MY-APP-qa-next.azurewebsites.net - next.js host 

1. click login on frontend
2. GET https://MY-APP-qa-next.azurewebsites.net/api/auth/providers
3. GET https://MY-APP-qa-next.azurewebsites.net/api/auth/csrf
4. POST https://MY-APP-qa-next.azurewebsites.net/api/auth/signin/oidc-custom
   Payload

csrfToken: xxxxxxx
callbackUrl: https://MY-APP-qa-next.azurewebsites.net/
json: true

5. GET https://MY-APP-qa-api.azurewebsites.net/connect/authorize
   Payload:

client_id: react
scope: openid email profile roles
response_type: code
redirect_uri: https://MY-APP-qa-next.azurewebsites.net/api/auth/callback/oidc-custom
prompt: login
state: xxxxxx

6. GET https://MY-APP-qa-api.azurewebsites.net/Account/Login
   Payload:

ReturnUrl: /connect/authorize?client_id=react&scope=openid%20email%20profile%20roles&response_type=code&redirect_uri=https%3A%2F%2FMY-APP-qa-next.azurewebsites.net%2Fapi%2Fauth%2Fcallback%2Foidc-custom&state=xxxxxxx&prompt=

7. So far everything seems to be fine and i put my credentials and click login
8. POST https://MY-APP-qa-api.azurewebsites.net/Account/Login
   Payload:

returnurl: /connect/authorize?client_id=react&scope=openid%20email%20profile%20roles&response_type=code&redirect_uri=https%3A%2F%2FMY-APP-qa-next.azurewebsites.net%2Fapi%2Fauth%2Fcallback%2Foidc-custom&state=xxxxxxx&prompt=

9. GET https://MY-APP-qa-api.azurewebsites.net/connect/authorize
   Payload:

client_id: react
scope: openid email profile roles
response_type: code
redirect_uri: https://MY-APP-qa-next.azurewebsites.net/api/auth/callback/oidc-custom
state: xxxxxx
prompt: 

10. GET https://MY-APP-qa-next.azurewebsites.net/api/auth/callback/oidc-custom
    payload:

code: xxxx
state: xxx

11. http://localhost:3000/api/auth/error?error=OAuthCallback
    payload:

error: OAuthCallback 

So this step no. 11 is to localhost with payload OAuthCallback error. No idea from where it comes from

When I run this locally (yarn run dev), then first ten steps are exactly the same and login is successfully done. Any idea what can be missing?

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[GrzegorzCzm]

Hi,

I was looking for solution for this issue for last two days. And now, when I posted it here I have tried one more thing. According to https://next-auth.js.org/getting-started/example#deploying-to-production I have added NEXTAUTH_URL as application setting under app service configuration.
Earlier I thought that something like below will be sufficient.

package.json

  (...)
  "scripts": {
   (...)
    "start": "cross-env NEXTAUTH_URL=https://MY-APP-qa-next.azurewebsites.net node server.js",
  },

Maybe this will work for regular server, but looks like Azure app service need to have NEXTAUTH_URL set in application setting.
So looks like problem solved.

[HabibaAsif]

Hello!
I am currently trying to upload my dynamic NextJS website to azure app services, the main website is static but there is a portion that requires MS Entra ID login and is dynamic the issue I am facing is in azure env variables I have added the NEXTAUTH_URL set as my main website link but when I try to login the dynamic part it shows the localhost/3000 in the url where main website link should be that is it is not catching the NEXTAUTH_URL variable from the azure. This NEXTAUTH_URL is also somehow causing the issue in deploying the static part when it is not set the static part is available on website but when it is set it is giving 400 error on the website
I have tried the deployment on vercel and it didn't require this NEXTAUTH_URL it uses the VERCEL_URL that i never needed to set it auto set it and that variable works with main website link.
I have tried adding the main website link manually, but it is not letting me login.