Firebase Login Example

Size
2,682 Kb
Views
66,792

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 Previews

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("/"); });
Firebase Login Example - Script Codes
Firebase Login Example - Script Codes
Home Page Home
Developer Aaron K Saunders
Username aaronksaunders
Uploaded September 25, 2022
Rating 3
Size 2,682 Kb
Views 66,792
Do you need developer help for Firebase Login Example?

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!

Aaron K Saunders (aaronksaunders) Script Codes
Create amazing love letters with AI!

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!