Kinde•2mo ago

ExpressJS SDK backend with AngularJS frontend auth issue

Hi, I'm currently having issues with local development. My backend is at http://localhost:3000 and my frontend is running at http://localhost:4200. I'm using the ExpressJS SDK in my backend and I'm trying to get through the login/logout process, but things aren't working as expected.

3 Replies

RicerOP•2mo ago

I have CORS setup, allowing the Kinde domain and the frontend. I also have a session setup using a local file store (via the "express-session" and "session-file-store" packages) My frontend's landing page has a "Sign in" button and the flow is: 1) User presses the button 2) An API call is made using HttpClient GET to /api/login (I have a proxy configuration) The user is not redirected to the authorization URL, which lets them enter credentials This is the api call:

this.api.loginWithKinde().subscribe({
  next: () => {
    console.log("Logged in to the server.");
  },
  error: (err) => {
    console.error('Error logging in to the server:', err);
  }
});

this.api.loginWithKinde().subscribe({
  next: () => {
    console.log("Logged in to the server.");
  },
  error: (err) => {
    console.error('Error logging in to the server:', err);
  }
});

The next() block occurs and nothing else Here's the proxy.conf.json:

{
    "/login": {
        "target": "http://localhost:3000/login",
        "secure": false,
        "changeOrigin": true,
        "pathRewrite": {
        "^/login": ""
        }
    },
    "/auth/callback": {
        "target": "http://localhost:3000/auth/callback",
        "secure": false,
        "changeOrigin": true,
        "pathRewrite": {
        "^/auth/callback": ""
        }
    },
    "/api": {
      "target": "http://localhost:3000",
      "secure": false,
      "changeOrigin": true,
      "pathRewrite": {
        "^/api": ""
      }
    }
}

{
    "/login": {
        "target": "http://localhost:3000/login",
        "secure": false,
        "changeOrigin": true,
        "pathRewrite": {
        "^/login": ""
        }
    },
    "/auth/callback": {
        "target": "http://localhost:3000/auth/callback",
        "secure": false,
        "changeOrigin": true,
        "pathRewrite": {
        "^/auth/callback": ""
        }
    },
    "/api": {
      "target": "http://localhost:3000",
      "secure": false,
      "changeOrigin": true,
      "pathRewrite": {
        "^/api": ""
      }
    }
}

Daniel_Kinde•2mo ago

Hi @Ricer , Are you able to share a simple repo showing the issue?

RicerOP•2mo ago

Hey @Daniel_Kinde, I don't sadly, but I did manage to solve the problem by adding { withCredentials: true } to my frontend's HTTP requests

Gaming

Programming

ExpressJS SDK backend with AngularJS frontend auth issue