LinusU / LinusU/flutter_web_auth

Can't get web auth to work with my own authentication server

Open
#154 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Dart
Stars
213
Forks
261
PR merge metrics
No merged PRs in 30d

Description

Hello,

I have my own authentication service to authenticate my users. The service is written in Go. The authentication flow works like this:

- the client queries `http://localhost:8080/auth/facebook`
- the client is redirected to a facebook page where the user will authorize my app
- facebook then redirects to `http://localhost:8080/auth/callback` with the user info (I do stuff with this data, like adding the user to a database)

The above works. I'm now trying to build the UI. So far I have something like this:

```dart
import 'package:flutter/material.dart';
import 'package:social_login_buttons/social_login_buttons.dart';
import 'package:flutter_web_auth/flutter_web_auth.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample',
home: LoginPage(),
);
}
}

class LoginPage extends StatelessWidget {
LoginPage({super.key});

@override
Widget build(BuildContext context) {

return LayoutBuilder(builder: (context, constraints) {
return Scaffold(
body: SocialLoginButton(
buttonType: SocialLoginButtonType.facebook,
onPressed: () async {
final result = await FlutterWebAuth.authenticate(
url: "http://localhost:8080/auth/facebook", callbackUrlScheme: "callback-scheme");

print("result: $result");

final token = await Uri.parse(result).queryParameters['token'];
print(token);
},
),
);
});
}
}
```

On the server side, this is the implementation of the `/auth/callback` endpoint:

```go
func AuthCallback(c *gin.Context) {
user, err := gothic.CompleteUserAuth(c.Writer, c.Request)

...

c.HTML(http.StatusOK, "auth.html", gin.H{})
// c.Redirect(http.StatusFound, "callback-scheme://")
}
```

I tried serving the `auth.html` page mentioned [here](https://github.com/LinusU/flutter_web_auth#web) from the server. With this setup, I can click the Facebook button, the web page opens, I can login on Facebook, and I can give permissions to the app. I'm then redirected to the `auth.html` page, and then...nada. I never get back anything for `final result =...` (on the client side). There is no error in the flutter console.

I tried other stuff on the server side:

```go
c.JSON(http.StatusOK, gin.H{"token": "hello"})
```
With this, I ultimately a json blob with the `hello` token in the web page that opens, but I'm not getting anything back on the client side.

I'm missing something, but I don't know what. Would you be able to help please?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the FlutterWebAuth.authenticate call and the server-side AuthCallback endpoint, then inspect the auth.html page referenced in the issue. Trace the redirect from the completed Facebook flow and determine what response the client receives; done means final result is populated with the callback data or token.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter, go
Domain
authentication, mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.