Skip to content
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

Update to oauth2 package README for Flutter Web info #1961

Open
wants to merge 1 commit 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
1 commit
Select commit
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
45 changes: 43 additions & 2 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 a 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).

```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
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
Loading