Registration/Profile Page

[reynoldsalec]

MVP Fields

• First/Last Name
• Email
• Password update (could go to the auth system if that's easier/more secure)
• Newsletter toggle

Wire these to our authentication profile management.

[reynoldsalec]

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.

[reynoldsalec]

https://auth0.com/docs/libraries/custom-signup

Redirect Logic w/Lock

1. Use Lock widget to power Sign Up. Have custom form fields present for people signing up without GitHub.
2. IF a user uses GitHub for sign up, redirect them to an additional form after sign up to collect additional information.

Fully Custom

1. Create a form in Vue
2. Create a submit handler that would send data to https://auth0.com/docs/api/authentication#signup --> this only works with "Database Connections", it wouldn't work with "Social Connections", IE third party IdPs like GitHub.
3. Redirect user to the Signup page (is there a way to automatically log them in?)

[reynoldsalec]

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.

[labboy0276]

The profile page has been tweaked so it is editable online. Still needs lots of TLC, but the base is there

[reynoldsalec]

This is looking good @labboy0276, per our convo this morning, we should focus on the "flow" and UX. Some things we need to do:

• Notification on saving values on the profile (check another profile form to see UX patterns, maybe Slack's?)
• If we need to log the user out for email (or other) changes, notify the user that this has happened/tell them what other actions may be necessary (email reconfirmation?)
• Move the auth page to the same Netlify webapp as the profile form.
• Persist authentication between sessions of the app

[reynoldsalec]

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.

[reynoldsalec]

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 :)

[reynoldsalec]

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.

[labboy0276]

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