Nextjs-auth0: Support Auth0 Lock Embedable Form

[jkjustjoshing]

Describe the problem you'd like to have solved

I want to be able to use https://auth0.com/lock with this. I have the login flow implemented using Lock right now, but when the callback is called I get an error thrown "Invalid request, an initial state could not be found". This is because auth0.handleLogin() is never called (because that forces a redirect to an Auth0 domain). Within auth0.handleLogin() a cookie with key a0:state gets set, and that key is read when auth0.handleCallback() is called.

Describe the ideal solution

An exposed method to set that cookie, pass a state to auth0.handleCallback(), or remove the requirement to have it defined.

Alternatives and current work-arounds

You can manually set the cookie key 'a0:state' to '{{state}}' before the user submits the Lock form, but this "magic string" isn't documented anywhere and could hypothetically change in the future.

[sandrinodimattia]

@jkjustjoshing thanks for filing this issue. This library was created with a focus on the Universal Login experience to keep the library light weight, hence the lack of support for Lock.

Would it be an option for your use case if we made the state cookie name configurable? That would not leak any Lock specific logic in the library but still allow you to support your use case (without having to rely on magic strings).

[jkjustjoshing]

Yeah, that definitely would do the trick!

[jkjustjoshing]

Misunderstood how Auth0 state works - this is my first time integrating with Auth0. This ticket is a non-issue.

[billymccafferty]

I'd like to revisit this question. Does anyone have an example of using the Lock widget within a Next.js application? A plunkr or similar example would be immensely assistive. Thank you!