mirror of
https://github.com/nisrulz/flutter-examples.git
synced 2025-11-08 20:50:04 +00:00
New Example - Firebase Google Authentication (#106)
* Added the firebase+google_authentication example * Modified Readme.md
This commit is contained in:
Sriraj
GitHub
109
firebase_google_authentication/lib/Screens/HomePage.dart
Normal file
109
firebase_google_authentication/lib/Screens/HomePage.dart
Normal file
@@ -0,0 +1,109 @@
|
||||
|
||||
import 'package:firebase_auth/firebase_auth.dart';
|
||||
import 'package:firebase_core/firebase_core.dart';
|
||||
import 'package:firebase_google_authentication/Screens/InfoPage.dart';
|
||||
import 'package:firebase_google_authentication/Screens/SignUpPage.dart';
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
|
||||
class HomePage extends StatefulWidget {
|
||||
const HomePage({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
_HomePageState createState() => _HomePageState();
|
||||
}
|
||||
|
||||
class _HomePageState extends State<HomePage> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final Size size = MediaQuery.of(context).size;
|
||||
return Scaffold(
|
||||
body: StreamBuilder(
|
||||
stream: FirebaseAuth.instance.authStateChanges(),
|
||||
builder: (context, snapshot) {
|
||||
if(snapshot.connectionState ==ConnectionState.waiting){
|
||||
return Center(child: CircularProgressIndicator(),);
|
||||
}
|
||||
else if(snapshot.hasError){
|
||||
return Center(child: Text('An error Occured!!'),);
|
||||
}else if(snapshot.hasData){
|
||||
return InfoPage();
|
||||
}else {
|
||||
return home(size, context);
|
||||
}
|
||||
}
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Column home(Size size, BuildContext context) {
|
||||
return Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text('Welcome!',
|
||||
style: GoogleFonts.lora(
|
||||
fontSize: 36,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 30,),
|
||||
SvgPicture.asset(
|
||||
'assets/login.svg',
|
||||
width: size.width*0.8,
|
||||
height: size.height*0.3,
|
||||
),
|
||||
SizedBox(height: 60,),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Container(
|
||||
width: size.width*0.8,
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(29),
|
||||
child: FlatButton(
|
||||
padding: EdgeInsets.symmetric(vertical: 15,horizontal: 40),
|
||||
onPressed: (){
|
||||
Navigator.push(context, MaterialPageRoute(builder: (context)=>SignUpPage(true)));
|
||||
},
|
||||
child: Text('Login',
|
||||
style: GoogleFonts.alice(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 20
|
||||
),
|
||||
),
|
||||
color: Color(0xFF6F35A5),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
SizedBox(height: 15,),
|
||||
Container(
|
||||
width: size.width*0.8,
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(29),
|
||||
child: FlatButton(
|
||||
padding: EdgeInsets.symmetric(vertical: 15,horizontal: 40),
|
||||
onPressed: (){
|
||||
Navigator.push(context,
|
||||
MaterialPageRoute(builder: (context)=> SignUpPage(false))
|
||||
);
|
||||
},
|
||||
child: Text('SignUp',
|
||||
style: GoogleFonts.alice(
|
||||
color: Colors.black,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 20
|
||||
),
|
||||
),
|
||||
color: Color(0xFFF1E6FF),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
64
firebase_google_authentication/lib/Screens/InfoPage.dart
Normal file
64
firebase_google_authentication/lib/Screens/InfoPage.dart
Normal file
@@ -0,0 +1,64 @@
|
||||
import 'package:firebase_auth/firebase_auth.dart';
|
||||
import 'package:firebase_google_authentication/Services/google_auth.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
class InfoPage extends StatefulWidget {
|
||||
const InfoPage({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
_InfoPageState createState() => _InfoPageState();
|
||||
}
|
||||
|
||||
class _InfoPageState extends State<InfoPage> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
User? user = FirebaseAuth.instance.currentUser;
|
||||
return SafeArea(
|
||||
child: Scaffold(
|
||||
body: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
FlatButton(onPressed: (){
|
||||
final provider = Provider.of<GoogleSignInProvider>(
|
||||
context,
|
||||
listen: false);
|
||||
provider.googleLogout();
|
||||
},
|
||||
child: Text('Logout',
|
||||
style: TextStyle(
|
||||
color: Colors.blue,
|
||||
fontSize: 16,
|
||||
),
|
||||
)),
|
||||
],
|
||||
),
|
||||
SizedBox(height: 200,),
|
||||
Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
//crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 40,
|
||||
backgroundImage: NetworkImage(
|
||||
user!.photoURL??'https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png'
|
||||
),
|
||||
),
|
||||
SizedBox(height: 15,),
|
||||
Text(user!.email??'',
|
||||
style: TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w500
|
||||
),
|
||||
),
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
269
firebase_google_authentication/lib/Screens/SignUpPage.dart
Normal file
269
firebase_google_authentication/lib/Screens/SignUpPage.dart
Normal file
@@ -0,0 +1,269 @@
|
||||
import 'package:firebase_auth/firebase_auth.dart';
|
||||
import 'package:firebase_google_authentication/Services/google_auth.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
class SignUpPage extends StatefulWidget {
|
||||
//const SignUpPage({Key? key}) : super(key: key);
|
||||
bool isLogin;
|
||||
SignUpPage(this.isLogin);
|
||||
@override
|
||||
_SignUpPageState createState() => _SignUpPageState(isLogin);
|
||||
}
|
||||
|
||||
class _SignUpPageState extends State<SignUpPage> {
|
||||
bool isLogin;
|
||||
_SignUpPageState(this.isLogin);
|
||||
|
||||
bool loggingIn = false;
|
||||
TextEditingController email = new TextEditingController();
|
||||
TextEditingController password = new TextEditingController();
|
||||
bool showPassword = false;
|
||||
|
||||
void showSnackBar() {
|
||||
final snackBar = new SnackBar(
|
||||
content: Text('Invalid Credentials!'),
|
||||
backgroundColor: Colors.red,
|
||||
padding: EdgeInsets.symmetric(horizontal: 10),
|
||||
behavior: SnackBarBehavior.floating,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
),
|
||||
);
|
||||
ScaffoldMessenger.of(context).showSnackBar(snackBar);
|
||||
}
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final Size size = MediaQuery.of(context).size;
|
||||
return Scaffold(
|
||||
body: SingleChildScrollView(
|
||||
child: Container(
|
||||
height: size.height,
|
||||
width: double.infinity,
|
||||
child: Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
(isLogin)?'Login':'SignUp',
|
||||
style: GoogleFonts.alice(
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 29,
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
height: 20,
|
||||
),
|
||||
SvgPicture.asset(
|
||||
(isLogin)?'assets/signup.svg':'assets/signup.svg',
|
||||
width: size.width * 0.5,
|
||||
height: size.height * 0.3,
|
||||
),
|
||||
SizedBox(
|
||||
height: 25,
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 30, right: 30),
|
||||
child: TextField(
|
||||
controller: email,
|
||||
keyboardType: TextInputType.emailAddress,
|
||||
decoration: InputDecoration(
|
||||
border: OutlineInputBorder(
|
||||
borderSide: BorderSide.none,
|
||||
borderRadius: BorderRadius.circular(29),
|
||||
),
|
||||
hintText: 'Your Email',
|
||||
filled: true,
|
||||
fillColor: Color(0xFFF1E6FF),
|
||||
prefixIcon: Icon(
|
||||
Icons.person,
|
||||
color: Color(0xFF6F35A5),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
height: 15,
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 30, right: 30),
|
||||
child: TextField(
|
||||
controller: password,
|
||||
obscureText: !showPassword,
|
||||
decoration: InputDecoration(
|
||||
border: OutlineInputBorder(
|
||||
borderSide: BorderSide.none,
|
||||
borderRadius: BorderRadius.circular(29),
|
||||
),
|
||||
hintText: 'Password',
|
||||
filled: true,
|
||||
fillColor: Color(0xFFF1E6FF),
|
||||
prefixIcon: Icon(
|
||||
Icons.lock,
|
||||
color: Color(0xFF6F35A5),
|
||||
),
|
||||
suffixIcon: showPassword
|
||||
? IconButton(
|
||||
icon: Icon(
|
||||
Icons.visibility_off,
|
||||
color: Color(0xFF6F35A5),
|
||||
),
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
showPassword = !showPassword;
|
||||
});
|
||||
},
|
||||
)
|
||||
: IconButton(
|
||||
icon: Icon(
|
||||
Icons.visibility,
|
||||
color: Color(0xFF6F35A5),
|
||||
),
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
showPassword = !showPassword;
|
||||
});
|
||||
},
|
||||
)),
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
height: 30,
|
||||
),
|
||||
Container(
|
||||
width: size.width * 0.8,
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(29),
|
||||
child: FlatButton(
|
||||
padding:
|
||||
EdgeInsets.symmetric(vertical: 15, horizontal: 40),
|
||||
onPressed: () {
|
||||
String _email = email.text;
|
||||
String _password = password.text;
|
||||
!(isLogin)?
|
||||
signUpClicked(_email, _password, context):
|
||||
loginClicked(_email, _password, context);
|
||||
},
|
||||
child: Text(
|
||||
(isLogin)?'Login':'SignUp',
|
||||
style: GoogleFonts.alata(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 20),
|
||||
),
|
||||
color: Color(0xFF6F35A5),
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
height: 18,
|
||||
),
|
||||
Container(
|
||||
width: size.width * 0.81,
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(29),
|
||||
child: FlatButton.icon(
|
||||
padding:
|
||||
EdgeInsets.symmetric(vertical: 15, horizontal: 40),
|
||||
onPressed: () {
|
||||
final provider = Provider.of<GoogleSignInProvider>(
|
||||
context,
|
||||
listen: false);
|
||||
provider.googleLogin().then((value) {
|
||||
Navigator.popUntil(
|
||||
context, (route) => route.isFirst);
|
||||
}).catchError((onError) {
|
||||
showSnackBar();
|
||||
});
|
||||
},
|
||||
icon: FaIcon(
|
||||
FontAwesomeIcons.google,
|
||||
color: Colors.white,
|
||||
),
|
||||
label: Text(
|
||||
(isLogin)?'Login with Google':'SignUp with Google',
|
||||
style: GoogleFonts.alata(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 20),
|
||||
),
|
||||
color: Color(0xFF6F35A5),
|
||||
),
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
height: 20,
|
||||
),
|
||||
GestureDetector(
|
||||
onTap: (){
|
||||
setState(() {
|
||||
isLogin = !isLogin;
|
||||
});
|
||||
},
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
(isLogin)?'Don\'t have an account?':'Already have an account?',
|
||||
style: GoogleFonts.lato(
|
||||
color: Color(0xFF6F35A5),
|
||||
),
|
||||
),
|
||||
Text(
|
||||
(isLogin)?'SignUp':'SignIn',
|
||||
style: GoogleFonts.lato(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Color(0xFF6F35A5),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
signUpClicked(String _email, String _password, BuildContext context) {
|
||||
FirebaseAuth.instance
|
||||
.createUserWithEmailAndPassword(
|
||||
email: _email, password: _password)
|
||||
.then((value) {
|
||||
setState(() {
|
||||
loggingIn = true;
|
||||
});
|
||||
Future.delayed(
|
||||
Duration(seconds: 1, milliseconds: 50), (){
|
||||
Navigator.popUntil(
|
||||
context, (route) => route.isFirst);
|
||||
});
|
||||
}).catchError((e) {
|
||||
showSnackBar();
|
||||
});
|
||||
}
|
||||
|
||||
bool loginClicked(String _email, String _password, BuildContext context) {
|
||||
FirebaseAuth.instance.signInWithEmailAndPassword(
|
||||
email: _email, password: _password).then((value){
|
||||
setState(() {
|
||||
loggingIn = true;
|
||||
});
|
||||
Future.delayed(Duration(seconds: 1,milliseconds: 50),(){
|
||||
Navigator.pop(context);
|
||||
});
|
||||
}).catchError((e){
|
||||
showSnackBar();
|
||||
});
|
||||
return loggingIn;
|
||||
}
|
||||
}
|
||||
49
firebase_google_authentication/lib/Services/google_auth.dart
Normal file
49
firebase_google_authentication/lib/Services/google_auth.dart
Normal file
@@ -0,0 +1,49 @@
|
||||
import 'package:firebase_auth/firebase_auth.dart';
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:google_sign_in/google_sign_in.dart';
|
||||
|
||||
|
||||
class GoogleSignInProvider extends ChangeNotifier{
|
||||
|
||||
final googleSignIn = GoogleSignIn();
|
||||
|
||||
GoogleSignInAccount? _user;
|
||||
User? user1;
|
||||
GoogleSignInAccount get user => _user!;
|
||||
String? userId;
|
||||
FirebaseAuth auth = FirebaseAuth.instance;
|
||||
|
||||
Future googleLogin()async{
|
||||
try{
|
||||
final googleUser = await googleSignIn.signIn();
|
||||
if(googleUser == null) return;
|
||||
_user = googleUser;
|
||||
|
||||
final googleAuth = await googleUser.authentication;
|
||||
|
||||
final credentials = GoogleAuthProvider.credential(
|
||||
accessToken: googleAuth.accessToken,
|
||||
idToken: googleAuth.idToken,
|
||||
);
|
||||
|
||||
final UserCredential authresult= await FirebaseAuth.instance.signInWithCredential(credentials);
|
||||
notifyListeners();
|
||||
}catch(e){
|
||||
print(e.toString());
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Future googleLogout()async{
|
||||
try{
|
||||
print('Logging Out');
|
||||
await googleSignIn.disconnect();
|
||||
FirebaseAuth.instance.signOut();
|
||||
}catch(e){
|
||||
FirebaseAuth.instance.signOut();
|
||||
}
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
26
firebase_google_authentication/lib/main.dart
Normal file
26
firebase_google_authentication/lib/main.dart
Normal file
@@ -0,0 +1,26 @@
|
||||
import 'package:firebase_core/firebase_core.dart';
|
||||
import 'package:firebase_google_authentication/Screens/HomePage.dart';
|
||||
import 'package:firebase_google_authentication/Services/google_auth.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
void main() async{
|
||||
WidgetsFlutterBinding.ensureInitialized();
|
||||
await Firebase.initializeApp();
|
||||
runApp(MyApp());
|
||||
}
|
||||
|
||||
class MyApp extends StatelessWidget {
|
||||
const MyApp({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ChangeNotifierProvider(
|
||||
create: (context) => GoogleSignInProvider(),
|
||||
child: MaterialApp(
|
||||
debugShowCheckedModeBanner: false,
|
||||
home: HomePage(),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user