The demo deploy from the blogpost is broken: https://kratos-nextjs-react-example.vercel.app/api/.ory/self-service/login/browser

{
  "error": {
    "code": 404,
    "status": "Not Found",
    "request": "edf10ca6-4b9c-4454-909b-d78205925863",
    "reason": "The requested Ory Cloud Project does not exist. Please ensure your custom domain or Ory Cloud Project Slug are correct.",
    "message": "project not found"
  }
}

https://kratos-nextjs-react-example.vercel.app/ https://www.ory.sh/login-spa-react-nextjs-authentication-example-api-open-source/

Blogpost tutorial seems to be broken as well. Could be related to the sdk change or something changed with the playground project.

Investigating if there is an easy fix for the blogpost tutorial.

While the example is useful for getting started with Ory out of the box, it's isn't a very friendly approach for large sites. Most react authentication libraries use a combination of Providers/Context to store the client to the authentication library and hooks to share the data to components.

https://github.com/authts/react-oidc-context provides an example of a more typical react authentication provider.

The advantages to this you only initialize the SDK once and share it across you entire app, without needing a useEffect on every page. based on my remedial understanding of the libraries, the following would be nice to have.

components

• <OryIdentityProvider OrySdkUrl=""> - initializes SDK
• <RequireMinAAL aal="aal2" onAALInsufficient={() => { console.log("We should probably prompt the user to elevate")}> - checks users AAL, prevents rendering of child elements and instead allow developers to automate some user defined action when AAL is insufficient maybe showing an elevation dialog

hooks

• useSession - get the current session
• useIdentity - get the current identity
• useLogoutUrl - get the logout url