Firebase Login Example
How do I make an firebase login example?
Simple firebase login example. What is a firebase login example? How do you make a firebase login example? This script and codes were developed by Aaron K Saunders on 25 September 2022, Sunday.
Firebase Login Example - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Firebase Login Example</title>
</head>
<body> <html ng-app="ionicApp">
<head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Collection Repeat w/ $http and $resource Factory Example</title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script> <script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
</head>
<body> <!-- Create the header bar --> <ion-nav-bar class="bar-positive"> <ion-nav-back-button class="button-icon ion-arrow-left-c"> </ion-nav-back-button> </ion-nav-bar> <!-- this is where the content from application is displayed --> <ion-nav-view></ion-nav-view> <script id="home.html" type="text/ng-template"> <div class="bar"> </div> <!-- The title of the ion-view will be shown on the navbar --> <ion-view view-title="Login Test: HOME"></ion-view> </script> <script id="login.html" type="text/ng-template"> <!-- add a search input field on top of page --> <div class="bar"> </div> <!-- The title of the ion-view will be shown on the navbar --> <ion-view view-title="Login Test"> <ion-content class="has-subheader"> <form class="list"> <ion-list> <label class="item item-input"> <span class="input-label">Username</span> <input type="text" placeholder=""ng-model="credentials.email"> </label> <label class="item item-input"> <span class="input-label">Password</span> <input type="password" placeholder=""ng-model="credentials.password"> </label> </ion-list> <div class="spacer" style="width: 300px; height: 31px;"></div> <a id="login-button1" class="button button-block" ng-click="login(credentials)"> Log in</a> <a id="reg-button1" class="button button-block" ng-click="register(credentials)"> register</a> </form> </ion-content> </ion-view> </script>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>
Firebase Login Example - Script Codes JS Codes
angular.module('ionicApp', ['ionic', "firebase"]) .value('ExampleConst', { 'FBBasePath': 'https://[YOUR-APP-NAME].firebaseio.com/' }) .controller('HomeCtrl', function($scope, ExampleConst) { alert("User Logged In") }) /** */ .controller('LoginCtrl', function($scope, $state, $firebaseAuth, ExampleConst) { $scope.credentials = { email: "", password: "" } $scope.login = function(_credentials) { debugger; var fbRef = new Firebase(ExampleConst.FBBasePath) var fbAuth = $firebaseAuth(fbRef); fbAuth.$authWithPassword(_credentials) .then(function(authData) { console.log("Authentication Data:", authData) $state.go("home",{}); }) .catch(function(error) { console.error("ERROR: " + error); alert(error) }); } $scope.register = function(_credentials) { var fbRef = new Firebase(ExampleConst.FBBasePath) var fbAuth = $firebaseAuth(fbRef); fbAuth.$createUser(_credentials).then(function() { return fbAuth.$authWithPassword(_credentials); }).then(function(authData) { console.log("Authentication Data:", authData) $state.go("home",{}); }).catch(function(error) { console.error("ERROR: " + error); alert(error) }); } }) .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('home', { url: '/home', templateUrl: 'home.html', controller: 'HomeCtrl' }) .state('index', { url: '/', templateUrl: 'login.html', controller: 'LoginCtrl' }); $urlRouterProvider.otherwise("/"); });
Developer | Aaron K Saunders |
Username | aaronksaunders |
Uploaded | September 25, 2022 |
Rating | 3 |
Size | 2,682 Kb |
Views | 66,792 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Angular2 Http Example | 3,851 Kb |
Promise sample for Cross-Platform mobile application class | 2,214 Kb |
A Pen by aaron k saunders | 2,916 Kb |
Ionic 2 Tabs Starter | 3,059 Kb |
Using ui-router to control application flow | 3,448 Kb |
Nested ng-repeat in AngularJS with Checkboxes | 2,600 Kb |
Leaflet Map Directive in Ionic | 2,517 Kb |
Google Map Directive in Ionic | 3,479 Kb |
A Pen by aaron k saunders | 2,286 Kb |
Proper way to manage ng-options selections | 2,114 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Bubble animation | Ftabor | 6,565 Kb |
See Through | Larrygeams | 77,410 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
SVG hamburger menu button | Elifitch | 2,602 Kb |
Portfolio Layout Flex | Lahvjal | 3,489 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
Snow collision | Wojtek1150 | 3,542 Kb |
Flower expansion | Sreucherand | 3,425 Kb |
Print element on a page | Mrs_snow | 2,081 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!