Menu
I am trying to get a Flutter v2 application working for Android, iOS and Web. I have user logins working successfully, integrating with Auth0 using the Authorization Code Flow.
However, for the web version I have tried several libraries and guides. But I haven't been able to get it working and can't find a full working example.
Libraries and guides I've tried:
Are there any example working applications I could use as template/starting point?
858
1. Example #1 with package: flutter_web_auth: ^0.4.0
example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:async';
import 'dart:io' show HttpServer;
import 'package:flutter_web_auth/flutter_web_auth.dart';
const html = """
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grant Access to Flutter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body { margin: 0; padding: 0; }
main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}
#icon {
font-size: 96pt;
}
#text {
padding: 2em;
max-width: 260px;
text-align: center;
}
#button a {
display: inline-block;
padding: 6px 12px;
color: white;
border: 1px solid rgba(27,31,35,.2);
border-radius: 3px;
background-image: linear-gradient(-180deg, #34d058 0%, #22863a 90%);
text-decoration: none;
font-size: 14px;
font-weight: 600;
}
#button a:active {
background-color: #279f43;
background-image: none;
}
</style>
</head>
<body>
<main>
<div id="icon">🏇</div>
<div id="text">Press the button below to sign in using your Localtest.me account.</div>
<div id="button"><a href="foobar://success?code=1337">Sign in</a></div>
</main>
</body>
</html>
""";
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _status = '';
@override
void initState() {
super.initState();
startServer();
}
Future<void> startServer() async {
final server = await HttpServer.bind('127.0.0.1', 43823);
server.listen((req) async {
setState(() { _status = 'Received request!'; });
req.response.headers.add('Content-Type', 'text/html');
req.response.write(html);
req.response.close();
});
}
void authenticate() async {
final url = 'http://localtest.me:43823/';
final callbackUrlScheme = 'foobar';
try {
final result = await FlutterWebAuth.authenticate(url: url, callbackUrlScheme: callbackUrlScheme);
setState(() { _status = 'Got result: $result'; });
} on PlatformException catch (e) {
setState(() { _status = 'Got error: $e'; });
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Web Auth example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Status: $_status\n'),
const SizedBox(height: 80),
ElevatedButton(
child: Text('Authenticate'),
onPressed: () { this.authenticate(); },
),
],
),
),
),
);
}
}
2. Example #2 with package: openidconnect
example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:openidconnect_example/choose.dart';
void main() {
runApp(MyApp());
}
//Credentials gathered from the playground
//login: [email protected]
//password: Yawning-Octopus-58
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ChoosePage(),
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
