Keeping the login/signup pages in one of the client applications

Is there way to implement the login and sign_up page in a client app?

So far I’ve tried:

  1. Copying the universal login page in one of our client apps- a rails app and I used the “auth0-lock” npm package, but a couple of problems arise. The main one being CORS policy errors:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://TENANT_NAME.auth0.com/usernamepassword/challenge. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404

and when attempting to login:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://TENANT_NAME.auth0.com/co/authenticate. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 403

I understand why that is, but I was wondering if there is a way for us to setup the CORS policy for those resources, because I couldn’t find it anywhere in the dashboard.

  1. Another thing we tried is to build our own login/sign_up page and use the management API to create the users. That works great for the sign_up page, but is there a way for us to be able to create a session for a user via the management API?

Reasoning:

Implementing the login and sign_up pages in a client app would make it easier for us to maintain them. So far we’ve got two tenants- one for the development and test environments and one for the production environment. When we want to make a change to the login page we sometimes update only one of the apps instead of both of them. Having it in a single repository, would make it easier for us to keep them both synchronized.

Right now we’re trying to change the way the login and sign up pages look to confine better to our product vision and it would look a lot different than what is provided as a default. How should we go about this? Adding a style tag to the universal login pages and trying to keep it up to date between the two apps, would be very cumbersome.

I found the Cross-Origin Authentication doc and found a solution to the problem we encountered in the first approach but now we get a different error when a user submits their login/sign up information:


Started GET "/users/auth/auth0/callback?code=SOME_CODE&state=SOME_STATE for ::1 at 2021-12-22 15:02:09 +0200
D, [2021-12-22T15:02:09.895590 #20945] DEBUG -- omniauth: (auth0) Callback phase initiated.
E, [2021-12-22T15:02:09.896906 #20945] ERROR -- omniauth: (auth0) Authentication failure! csrf_detected: OmniAuth::Strategies::OAuth2::CallbackError, csrf_detected | CSRF detected

we’re using the omniauth-auth0 gem and the devise omniauth integration.

1 Like

I’m glad you were able to find a solution to the challenge you were facing and I apologize we didn’t respond faster to assist! I hope you have an incredible New Year :tada:

Hi, James, wish you all the best all the way through 2022, but I haven’t actually solved the whole problem. Like I said in my last comment I’m getting an error when I submit the login information:

Started GET "/users/auth/auth0/callback?code=SOME_CODE&state=SOME_STATE for ::1 at 2022-01-04 12:49:26 +0200
D, [2022-01-04T12:49:26.754040 #10821] DEBUG -- omniauth: (auth0) Callback phase initiated.
E, [2022-01-04T12:49:26.754360 #10821] ERROR -- omniauth: (auth0) Authentication failure! csrf_detected: OmniAuth::Strategies::OAuth2::CallbackError, csrf_detected | CSRF detected

The only event in the logs is the following:

{
  "date": "2022-01-04T10:49:26.624Z",
  "type": "scoa",
  "connection": "Username-Password-Authentication",
  "connection_id": <HIDDEN>,
  "client_id": <HIDDEN>,
  "client_name":  <HIDDEN>,
  "ip":  <HIDDEN>,
  "user_agent": "Chrome 95.0.4638 / Linux 0.0.0",
  "details": {
    "prompts": [
      {
        "name": "coverify",
        "session": true,
        "stats": {
          "loginsCount": 77
        },
        "connection": "Username-Password-Authentication",
        "timers": {
          "rules": 367
        },
        "elapsedTime": null
      }
    ],
    "completedAt": 1641293366621,
    "elapsedTime": null,
    "actions": {
      "executions": [
        "8q66vV4RQWGVawzpUYoOazIwMjIwMTA0"
      ]
    },
    "stats": {
      "loginsCount": 77
    }
  },
  "hostname":  <HIDDEN>,
  "user_id":  <HIDDEN>,
  "user_name":  <HIDDEN>,
  "auth0_client": {
    "name": "lock.js",
    "version": "11.31.1",
    "env": {
      "auth0.js": "9.18.0"
    }
  },
  "log_id":  <HIDDEN>,
  "_id":  <HIDDEN>,
  "isMobile": false,
  "description": "Successful cross-origin authentication"
}

Pinging so the thread doesn’t get closed

Pinging so the thread doesn’t get closed

@James.Morrison Hi, James, was wondering if you had any updates here?

@James.Morrison any updates here?