Skip to content

Update to oauth2 package README for Flutter Web info #1961

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Update to oauth2 package README for Flutter Web info #1961

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a322ac8
Update to oauth2 package README for Flutter Web info
AbgarSim Jan 10, 2025
c4276ef
Merge branch 'main' into oauth2-readme
AbgarSim May 12, 2025
fc6a803
Merge branch 'main' into oauth2-readme
AbgarSim May 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions pkgs/oauth2/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## 2.0.5

* Updated README

## 2.0.4-wip

* Require Dart 3.4
Expand Down
47 changes: 44 additions & 3 deletions pkgs/oauth2/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,15 +128,16 @@ because different options exist for each platform.
For Flutter apps, there's two popular approaches:

1. Launch a browser using [url_launcher][] and listen for a redirect using
[uni_links][].
[app_links][].

```dart
if (await canLaunch(authorizationUrl.toString())) {
await launch(authorizationUrl.toString()); }

// ------- 8< -------

final linksStream = getLinksStream().listen((Uri uri) async {
final appLinks = AppLinks();
final linksStream = appLinks.uriLinkStream.listen((Uri uri) async {
if (uri.toString().startsWith(redirectUrl)) {
responseUrl = uri;
}
Expand All @@ -161,6 +162,46 @@ For Flutter apps, there's two popular approaches:
);
```


1. To handle redirect on Flutter Web you would need to add an html file to the web folder with some
additional JS code to handle the redirect back to the app (in this example the code will be saved
and passed through localStorage).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This kind of depends on how you configure your oauth2 flow and what you're redirect URL is, doesn't it?

Copy link
Author

@AbgarSim AbgarSim May 12, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jonasfj while the redirect behavior on Flutter Web does depend on how the OAuth2 flow is configured and the redirect URI set in the provider - the example I added is meant to provide a minimal working solution for handling redirects specifically when using implicit or authorization code flows with a custom redirect HTML page (which I think is the most common use case).

The intent is to give developers a concrete starting point, since the existing documentation and issues (e.g., #350) don’t cover a practical approach for Web, and a lot of stackoverflow questions/issues indicate that developers are often confused by this.


```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>OAuth Callback</title>
</head>
<body>
<script>
const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get('code');

// Store them in localStorage (or sessionStorage).
if (code) {
localStorage.setItem('oauth_code', code);
}

// Redirect back to app
window.location.replace('/#/');
</script>
</body>
</html>
```

After redirect to the application the code can be extracted and processed using the dart.html
package

```dart
import 'dart:html' as html;
...
if(html.window.localStorage.containsKey('oauth_code')
code = html.window.localStorage.remove('oauth_code')
...
```

For Dart apps, the best approach depends on the available options for accessing
a browser. In general, you'll need to launch the authorization URL through the
client's browser and listen for the redirect URL.
Expand Down Expand Up @@ -255,6 +296,6 @@ File('~/.myapp/credentials.json').writeAsString(client.credentials.toJson());
[resourceOwnerPasswordGrantDocs]: https://oauth.net/2/grant-types/password/
[resourceOwnerPasswordGrantMethod]: https://pub.dev/documentation/oauth2/latest/oauth2/resourceOwnerPasswordGrant.html
[resourceOwnerPasswordGrantSection]: #resource-owner-password-grant
[uni_links]: https://pub.dev/packages/uni_links
[app_links]: https://pub.dev/packages/app_links
[url_launcher]: https://pub.dev/packages/url_launcher
[webview_flutter]: https://pub.dev/packages/webview_flutter
2 changes: 1 addition & 1 deletion pkgs/oauth2/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
name: oauth2
version: 2.0.4-wip
version: 2.0.5
description: >-
A client library for authenticating with a remote service via OAuth2 on
behalf of a user, and making authorized HTTP requests with the user's
Expand Down