Tauri-bundled Angular App with Auth0 SDK

Help
,
1

Hi, in my Angular app, I have the following code:

import { inject } from '@angular/core';
import { AuthorizationParams, AuthService } from '@auth0/auth0-angular';
// other imports
export abstract class AuthClient {
// ...
}
export function authClientFactory(): AuthClient {
  const auth = inject(AuthService);
  // ...
  auth.loginWithRedirect({
    prompt: 'select_account',
    connection: 'google-oauth2',
  });
  // ...
}

The user is able to click on “Continue with Google” button that invokes the logic of the auth client above, with invoking the loginWithRedirect method of the inject Auth0 auth service.

In my served Angular app, as a web app, the Auth0 SDK integration works well: we reach the select account screen and can authenticate with Google.

However, with our Tauri-bundled Angular app - we don’t. We reach the select account screen, but clicking on any account doesn’t do any navigation. After two clicks, we reach an Auth0 error page with the following error message:
“You may have pressed the back button, refreshed during login, opened too many login dialogs, or there is some issue with cookies, since we couldn’t find your session. Try logging in again from the application and if the problem persists please contact the administrator.”
Can you think about the cause of this issue and how to resolve it?

This is the Tauri build command:

tauri build --debug -c=myapp/tauri.conf.json

And this is the Tauri JSON config file:

{
  "$schema": "../../../node_modules/@tauri-apps/cli/schema.json",
  "build": {
    "devPath": "http://localhost:4200",
    "distDir": "../../../dist/apps/myapp"
  },
  "package": {
    "productName": "lab",
    "version": "../package.json"
  },
  "tauri": {
    "macOSPrivateApi": true,
    "allowlist": {
      "all": false,
      "http": {
        "all": true,
        "scope": [
          "...",
        ]
      },
      "window": {
        "all": true
      },
      "shell": {
        "all": true
      },
      "path": {
        "all": true
      }
    },
    "bundle": {
      "active": true,
      "category": "DeveloperTool",
      "copyright": "",
      "externalBin": [],
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ],
      "identifier": "...",
      "longDescription": "",
      "resources": [],
      "shortDescription": "",
      "targets": "all",
      "deb": {
        "depends": []
      },
      "macOS": {
        "frameworks": [],
        "minimumSystemVersion": "",
        "exceptionDomain": "",
        "signingIdentity": null,
        "entitlements": null
      },
      "windows": {
        "certificateThumbprint": null,
        "digestAlgorithm": "sha256",
        "timestampUrl": ""
      }
    },
    "security": {
      "csp": {
        "default-src": "'self' customprotocol: asset: *",
        "connect-src": "ipc: http://ipc.localhost *",
        "font-src": ["https://fonts.gstatic.com", "*"],
        "img-src": "'self' asset: http://asset.localhost blob: data: *",
        "style-src": "'unsafe-inline' 'self' https://fonts.googleapis.com *",
        "script-src": "'unsafe-inline' 'unsafe-eval' 'self' *"
      }
    },
    "updater": {
      "active": false,
      "pubkey": "...",
      "endpoints": ["..."]
    },
    "windows": [
      {
        "title": "My app",
        "maximized": true,
        "minWidth": 600,
        "minHeight": 800
      }
    ]
  }
}

Thanks in advance.

1 Like