Integrate Firebase authentication in an AngularDart app - firebase

Question

I can not find a clear and complete explanation on how to integrate Firebase authentication (Google, e-mail, phone, ...) into an AngularDart (version 5) app.
Can you give it to me? Or, can you tell me where to find it?
Thank you!

Answer 1

firebase_dart_ui works for me. The repository contains an example, too.

Answer 2

Likewise. I spent a long time trying to find something...anything. While new to Angular Dart these examples that actually worked where a good find. The repo has examples for simple auth + phone and storage etc.
The md talks a little about what you need to setup in the Firebase console, you'll need to allow your host access for the Firebase generated keys in cloud console as well.
As Gazihan mentioned, the firebase_dart_ui package will do signing in with Google etc if you want to use Firebase UI, agreed, it's hard to follow in terms of finding steps. I had to change dev dependencies to get it to working but it did:
dev_dependencies:
build_runner: ^1.7.0
build_test: ^0.10.8
build_web_compilers: ^2.4.0
The following user/pwd signin example from the FirebaseDart repo is more straight forward and could help.
First, get your App details from your projects Firebase settings page.
index.dart
import 'dart:convert';
import 'dart:html';
import 'package:firebase/firebase.dart' as fb;
main() async {
try {
fb.initializeApp(
apiKey: "your api key",
authDomain: "your auth domain",
databaseURL: "your database url",
storageBucket: "your storage bucket");
AuthApp();
} on fb.FirebaseJsNotLoadedException catch (e) {
print(e);
}
}
class AuthApp {
final fb.Auth auth;
final FormElement registerForm;
final InputElement email, password;
final AnchorElement logout;
final TableElement authInfo;
final ParagraphElement error;
final SelectElement persistenceState, verifyEmailLanguage;
final ButtonElement verifyEmail;
final DivElement registeredUser, verifyEmailContainer;
AuthApp()
: this.auth = fb.auth(),
this.email = querySelector("#email"),
this.password = querySelector("#password"),
this.authInfo = querySelector("#auth_info"),
this.error = querySelector("#register_form p"),
this.logout = querySelector("#logout_btn"),
this.registerForm = querySelector("#register_form"),
this.persistenceState = querySelector("#persistent_state"),
this.verifyEmail = querySelector('#verify_email'),
this.verifyEmailLanguage = querySelector('#verify_email_language'),
this.registeredUser = querySelector("#registered_user"),
this.verifyEmailContainer = querySelector("#verify_email_container") {
logout.onClick.listen((e) {
e.preventDefault();
auth.signOut();
});
this.registerForm.onSubmit.listen((e) {
e.preventDefault();
var emailValue = email.value.trim();
var passwordvalue = password.value.trim();
_registerUser(emailValue, passwordvalue);
});
// After opening
if (auth.currentUser != null) {
_setLayout(auth.currentUser);
}
// When auth state changes
auth.onAuthStateChanged.listen(_setLayout);
verifyEmail.onClick.listen((e) async {
verifyEmail.disabled = true;
verifyEmail.text = 'Sending verification email...';
try {
// you will get the verification email in selected language
auth.languageCode = _getSelectedValue(verifyEmailLanguage);
// url should be any authorized domain in your console - we use here,
// for this example, authDomain because it is whitelisted by default
// More info: https://firebase.google.com/docs/auth/web/passing-state-in-email-actions
await auth.currentUser.sendEmailVerification(
fb.ActionCodeSettings(url: "followmyvoyage.firebaseapp.com"));
verifyEmail.text = 'Verification email sent!';
} catch (e) {
verifyEmail
..text = e.toString()
..style.color = 'red';
}
});
}
_registerUser(String email, String password) async {
if (email.isNotEmpty && password.isNotEmpty) {
var trySignin = false;
try {
// Modifies persistence state. More info: https://firebase.google.com/docs/auth/web/auth-state-persistence
var selectedPersistence = _getSelectedValue(persistenceState);
await auth.setPersistence(selectedPersistence);
await auth.createUserWithEmailAndPassword(email, password);
} on fb.FirebaseError catch (e) {
if (e.code == "auth/email-already-in-use") {
trySignin = true;
}
} catch (e) {
error.text = e.toString();
}
if (trySignin) {
try {
await auth.signInWithEmailAndPassword(email, password);
} catch (e) {
error.text = e.toString();
}
}
} else {
error.text = "Please fill correct e-mail and password.";
}
}
String _getSelectedValue(SelectElement element) =>
element.options[element.selectedIndex].value;
void _setLayout(fb.User user) {
if (user != null) {
registerForm.style.display = "none";
registeredUser.style.display = "block";
email.value = "";
password.value = "";
error.text = "";
var data = <String, dynamic>{
'email': user.email,
'emailVerified': user.emailVerified,
'isAnonymous': user.isAnonymous,
'metadata.creationTime': user.metadata.creationTime,
'metadata.lastSignInTime': user.metadata.lastSignInTime
};
data.forEach((k, v) {
if (v != null) {
var row = authInfo.addRow();
row.addCell()
..text = k
..classes.add('header');
row.addCell().text = "$v";
}
});
print('User.toJson:');
print(const JsonEncoder.withIndent(' ').convert(user));
verifyEmailContainer.style.display =
user.emailVerified ? "none" : "block";
} else {
registerForm.style.display = "block";
registeredUser.style.display = "none";
authInfo.children.clear();
}
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Auth demo</title>
<style type="text/css">
#register_form p {
color: red;
}
#auth_info td {
padding: 1px;
}
#auth_info td.header {
font-weight: bold;
text-align: right;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Auth demo</h1>
<form id="register_form" style="display: none">
<h2>Register</h2>
<p></p>
<label for="persistent_state">State persistence type</label>
<select id="persistent_state">
<option value="local">LOCAL</option>
<option value="session">SESSION</option>
<option value="none">NONE</option>
</select>
<br>
<input type="email" placeholder="Your E-mail" id="email">
<input type="password" placeholder="Your Password" id="password">
<input type="submit" value="Register me">
</form>
<div id="registered_user" style="display: none">
<table id="auth_info">
</table>
<div id="verify_email_container">
<h2>Send verify email</h2>
<label for="verify_email_language">Email language</label>
<select id="verify_email_language">
<option value="en">English</option>
<option value="cs">Czech</option>
<option value="de">German</option>
<option value="fr">French</option>
</select>
<button id="verify_email">Verify email</button>
</div>
Log out
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js"></script>
<script defer src="index.dart.js" type="application/javascript"></script>
</body>
</html>
pubspec.yaml
dependencies:
firebase: ^5.0.0
http: '>=0.11.3 <0.13.0'
js: ^0.6.0
This answer is a bit all over the place, between the two examples talked about hopefully it's useful.