[SDK-3984] Support login on web platform #203
Conversation
| Auth0Web(final String domain, final String clientId) | ||
| : _account = Account(domain, clientId); | ||
|
|
||
| Future<Credentials?> onLoad() async { |
There was a problem hiding this comment.
This might need a new name - I'm not precious about it - but the point was to introduce some kind of initializer that could perform some async work on startup. This would allow us to create the client, but also do the check for calling handleRedirectCallback or checkSession depending on URL contents on startup.
Codecov ReportBase: 98.33% // Head: 98.07% // Decreases project coverage by
Additional details and impacted files@@ Coverage Diff @@
## beta #203 +/- ##
============================================
- Coverage 98.33% 98.07% -0.27%
Complexity 82 82
============================================
Files 81 82 +1
Lines 1445 1453 +8
Branches 320 320
============================================
+ Hits 1421 1425 +4
- Misses 12 16 +4
Partials 12 12
Flags with carried forward coverage won't be shown. Click here to find out more.
Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here. ☔ View full report at Codecov. |
| T stripNulls<T extends Object>(final T obj) { | ||
| final keys = objectKeys(obj); | ||
| final output = newObject<Object>(); | ||
|
|
||
| for (var i = 0; i < keys.length; i++) { | ||
| final key = keys[i] as String; | ||
| final value = getProperty(obj, key) as dynamic; | ||
|
|
||
| if (value != null) { | ||
| setProperty(output, key, value); | ||
| } | ||
| } | ||
|
|
||
| return output as T; | ||
| } |
There was a problem hiding this comment.
Some mapping between the keys to strip out values that were null is necessary, otherwise the nulls get sent through the URL to the IdP, which is undesirable. The SPA SDK doesn't strip these out.
This is needed as Dart JS interop treats null and undefined as completely identical. Consider this example:
final String? redirectUri = null;
client.loginWithRedirect(RedirectLoginOptions(
authorizationParams: AuthorizationParams(
redirect_uri: redirectUri)));
// redirect_uri is `null` in the URLWithout some mapping function that executes in JS land, an alternative would be to do two different calls depending on whether redirectUri is null or not, which doesn't scale as this applies to all optional parameters.
Or, use Map<string, string> in the API, in which case we lose strong typing but also in JS land this equates to using a Dart Map type, which is different from a plain JS object, so the JS interop API doesn't line up with reality (must use classes annotated with @anonymous and external factory constructors).
There was a problem hiding this comment.
Again, not precious on the name of the function, happy to hear suggestions.
auth0_flutter_platform_interface/lib/src/web-auth/web_auth_login_options.dart
Outdated
Show resolved
Hide resolved
auth0_flutter_platform_interface/lib/src/web-auth/web_auth_login_options.dart
Outdated
Show resolved
Hide resolved
| Future<Credentials?> onLoad() async { | ||
| await Auth0FlutterWebPlatform.instance.initialize(_account); | ||
|
|
||
| // Get credentials here and return them on load? |
There was a problem hiding this comment.
Could the consumer use the result to check if the user is logged in?
There was a problem hiding this comment.
Yes, I suppose the idea would be if the returned Credentials is not null, the user could be considered logged in. The use case I imagined would be if you were to initialize it in initState, the developer could then set up their initial app state accordingly:
@override
void initState() {
super.initState();
auth0Web =
Auth0Web(dotenv.env['AUTH0_DOMAIN']!, dotenv.env['AUTH0_CLIENT_ID']!);
// call to initialize the client and auto-handle callback or check session
auth0Web.onLoad().then((creds) {
if (creds != null) {
// set "logged in" state here
}
});
}
| String output = ''; | ||
|
|
||
| if (kIsWeb) { | ||
| auth0Web.loginWithRedirect(redirectUri: 'http://localhost:3000'); |
There was a problem hiding this comment.
Should this have an await, and be all wrapped in the same try/catch?
There was a problem hiding this comment.
Also, what happens with the errors returned from JS land?
There was a problem hiding this comment.
Should this have an await, and be all wrapped in the same try/catch?
Yes, probably should.
Also, what happens with the errors returned from JS land?
They should get surfaced in the same way. Something to test, though.
📋 Changes
This PR presents an initial implementation of the Flutter Web with JS interop and Auth0 SPA SDK. It supports:
loginWithRedirectcheckSessionhandleRedirectCallbackon loadThings that are pending in forthcoming PRs:
AuthorizeParamsare supported until the API matures)Usage
This PR also includes a refactoring of
WebAuthLoginOptionsto create a base typeLoginOptionsthat can also be used by the web platform. The former extends the latter and adds the two mobile platform propertiesuseEphemeralSessionandschemethat are not applicable for the web.🎯 Testing
The example app has been updated to support login when using the Web platform. To run:
The example app will use the same domain & client ID as defined in
.env.