Open reynoldsalec opened 2 years ago
So I've spent some time looking at signup stuff. If we use the Lock widget, we can add custom fields for users who don't use third party login (GitHub). Right now we're just looking at F/L Name and newsletter preference, so that works pretty well. If they use a third party login, we can grab some info from their profile (varies depending on service), but if we want more details, we'd have to redirect them to another page via Rules, save those details with a Management API call, and then use the token to complete authentication.
I'm going to look more into a fully custom setup; the example project I saw during standup seems to be another Lock-derived example, so maybe no dice there.
Either way, I'm more convinced that we'll need a remote datastore that is not Auth0 once we move to storing config values. Auth0 explicitly recommends only storing the data you need for authentication (primarily due to search/indexing issues within the Auth0 system I believe) and there are limits on what you can store in user_metadata (length of values) we might run up against.
https://auth0.com/docs/libraries/custom-signup
Redirect Logic w/Lock
Fully Custom
John is going to create a Vue-powered app to host the profile management page. Once he has the scaffolding up for that, one of us will implement a registration form (after the model of the "Redirect Logic w/Lock" above) to collect additional field information upon registration.
The profile page has been tweaked so it is editable online. Still needs lots of TLC, but the base is there
This is looking good @labboy0276, per our convo this morning, we should focus on the "flow" and UX. Some things we need to do:
Ok, coming back to authentication/sign-up, to bring these into the webapp project, we're hitting a blocker that the auth0-lock
package doesn't compile with Vite. I believe this is because it's a CommonJS module (or has CommonJS modules as dependencies) and Vite's Rollup isn't translating that over to the native ESM format that Vite wants. Tried a few approaches to making that work (primarily playing with explicit includes
in the Rollup settings for Vite), but no dice.
At this point, I think we have two options: redirect to a hosted login form and collect additional signup information from users on a separate form that we redirect to (this sounds ugly, but it's a recommended Auth0 practice), or make a custom form.
Custom Login Form For social logins, we'd make a Netlify function that communicates with Auth0's /authorize endpoint in the Authentication API.
For username/password logins, we'd make a Netlify function that communicates with Auth0's /oauth/token endpoint in the Authentication API, a la the Resource Owner Password Flow.
Alternative approach talking with Mike: just have a Webpack config file in the webapp project and use Webpack to build the Lock widget. Easy button. Going to hook that up and make sure it isn't a terrible experience :)
So I figured out how to load in Auth0 Lock (I believe), now I'm trying to figure out how we can use the authenticated data to retrieve the profile data in a sane way, but probably need to talk with @labboy0276 about it.
Now that we have the auth0-lock working, I did some research, and it seems we can store the access token in localstorage.
We could try something like: https://github.com/prazdevs/pinia-plugin-persistedstate which would play nice with what we are doing in other setups. IT also may help solve the access token issue on the desktop.
Also, see this https://auth0.com/docs/secure/security-guidance/data-security/token-storage#browser-local-storage-scenarios
MVP Fields
Wire these to our authentication profile management.