AngelEyesChina/AngularFire-0.9.0-auth.markdown

## AngularFire-0.9.0-auth.markdown

      
    Raw
  

              AngularFire-0.9.0-auth.markdown
            
          
    AngularFire 0.9.0 auth

A Pen by angel eyes on CodePen.
License.

  
## index.html
<html ng-app="sampleApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="SampleCtrl">
    <div ng-show="user">
      <p>Hello, {{ user.facebook.displayName }}</p>
      <button ng-click="auth.$unauth()">Logout</button>
    </div>
    <div ng-hide="user">
      <p>Welcome, please log in.</p>
      <button ng-click="auth.$authWithOAuthPopup('facebook')">Login</button>
    </div>
  </body>
</html>

## script.js
var app = angular.module("sampleApp", ["firebase"]);

// let's create a re-usable factory that generates the $firebaseAuth instance
app.factory("Auth", ["$firebaseAuth", function($firebaseAuth) {
  var ref = new Firebase("https://<replace-with-your-db-id>.firebaseio.com/");
  return $firebaseAuth(ref);
}]);

// and use it in our controller
app.controller("SampleCtrl", ["$scope", "Auth", function($scope, Auth) {
  $scope.auth = Auth;
  $scope.user = $scope.auth.$getAuth();
}])
	<html ng-app="sampleApp">
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
	<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
	<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
	<script src="app.js"></script>
	</head>
	<body ng-controller="SampleCtrl">
	<div ng-show="user">
	<p>Hello, {{ user.facebook.displayName }}</p>
	<button ng-click="auth.$unauth()">Logout</button>
	</div>
	<div ng-hide="user">
	<p>Welcome, please log in.</p>
	<button ng-click="auth.$authWithOAuthPopup('facebook')">Login</button>
	</div>
	</body>
	</html>
	var app = angular.module("sampleApp", ["firebase"]);

	// let's create a re-usable factory that generates the $firebaseAuth instance
	app.factory("Auth", ["$firebaseAuth", function($firebaseAuth) {
	var ref = new Firebase("https://<replace-with-your-db-id>.firebaseio.com/");
	return $firebaseAuth(ref);
	}]);

	// and use it in our controller
	app.controller("SampleCtrl", ["$scope", "Auth", function($scope, Auth) {
	$scope.auth = Auth;
	$scope.user = $scope.auth.$getAuth();
	}])