https://github.com/testeurmaniak/flutter_web_twitch_auth
Example to illustrate how to implement an OAuth2 authentication flow in Flutter Web.
https://github.com/testeurmaniak/flutter_web_twitch_auth
authentication flutter flutter-web twitch
Last synced: 10 months ago
JSON representation
Example to illustrate how to implement an OAuth2 authentication flow in Flutter Web.
- Host: GitHub
- URL: https://github.com/testeurmaniak/flutter_web_twitch_auth
- Owner: TesteurManiak
- Created: 2021-02-20T19:53:50.000Z (almost 5 years ago)
- Default Branch: use-external-win
- Last Pushed: 2021-09-12T12:23:32.000Z (over 4 years ago)
- Last Synced: 2025-03-24T19:21:57.616Z (11 months ago)
- Topics: authentication, flutter, flutter-web, twitch
- Language: Dart
- Homepage: https://itnext.io/flutter-web-oauth-authentication-through-external-window-d890a7ff6463
- Size: 76.2 KB
- Stars: 14
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# flutter_web_twitch_auth
A Flutter Web project to illustrate OAuth2 authentication flow using Twitch's API.
The project on this branch is using an external popup window to manage the login with Twitch.
## Getting Started
To grab the response code in the callback URL I've added a `static.html` page in the `web/` folder. Its purpose is to send a message containing the URL with the access token to the parent window which would be the initial window of the Flutter application.
```html
Connexion Succeeded
window.opener.postMessage(window.location.href, '*');
```
As for the Flutter code I've added a listener for incoming message to trigger the login when received a correct response.
```dart
// Listen to message send with `postMessage`.
html.window.onMessage.listen((event) {
// The event contains the token which means the user is connected.
if (event.data.toString().contains('access_token=')) {
_login(event.data);
}
});
```
Also opening the login page in an external window and using our `static.html` page as the redirect_uri.
```dart
// Open the Twitch authentication page.
WidgetsBinding.instance.addPostFrameCallback((_) {
final currentUri = Uri.base;
final redirectUri = Uri(
host: currentUri.host,
scheme: currentUri.scheme,
port: currentUri.port,
path: '/static.html',
);
final authUrl =
'https://id.twitch.tv/oauth2/authorize?response_type=token&client_id=$clientId&redirect_uri=$redirectUri&scope=viewing_activity_read';
// Keeping a reference to the popup window so you can close it after login is completed
_popupWin = html.window.open(
authUrl, "Twitch Auth", "width=800, height=900, scrollbars=yes");
});
```