I handle authentication in my Ionic app with a Service. I would like to have View separated from Service. I have a function in auth service to fetch user. If user is not available in memory or database, I want the user to be redirected to Login page. This getUser function is used in different components.
getUser(){
if (this.user) {
return Promise.resolve(this.user) ;
} else {
return this.storage.get('user').then( (user) => {
if (user){
this.user = user;
return user
} else {
\\ way to prompt login page here.
}
})
.catch( this.handleError )
}
}
I would like to have something like a base component to handle login page push when user is not available. As far as I know angular doesn't support component inheritance. How can I achieve the functionality ? What I was thinking was a Subject emitted when no user is available. And the base component subscribe to this subject . How can I achieve this in Ionic ?
Related
I am using the Auth0-js package v9.1 to connect to my React app to a Hosted Page, which internally using Auth0Lock to customize user signup parameters.
What I would like to do is have a link to go to the login tab, and a separate button to connect directly to the Sign Up tab. Is this kind of control possible?
I have a AuthService wrapper class which I'm using to launch the Auth0 Lock client currently.
export class AuthService() {
constructor() {
this.auth0 = new auth0.WebAuth(
{
domain: AUTH0_DOMAIN,
clientID: AUTH0_CLIENT_ID,
redirectUri: AUTH0_REDIRECT_URL,
audience: AUTH0_AUDIENCE_URL,
responseType: 'token id_token',
scope: 'openid profile email'
}
)
}
isAuthenticated() {
// Check whether the session has past the
// access token's expiry time
return ( ! this.isSessionExpired() )
}
// display the Auth0 lock modal and allow the user to log in
login() {
this.auth0.authorize()
}
...
}
export default new AuthService
What I would like to have is a method which links directly to the Sign Up tab, so I can call it from a specialize component
....
signup() {
this.auth0.authorize('signup')
- or alternatively -
this.auth0.signup()
}
....
Is something like this possible? How would I go about linking directly to that Sign Up tab?
Thx
I am trying to use angular-permission to implement permission-based authentication but I don't know where to define those permissions which are retrieved from my back-end via API which requires token-based access.
First, let me give a bit background about how my app looks like. On my back-end, my system portal, I define permissions to allow different APIs to be called. Permissions won't change all the time. Only when I add new features(APIs), new permissions will be added. For example.
permission1: api1,api2,api3
permission2:api4,api5,api6
permission3:api7,api8,api9
On the front-end, customers login the front-end web portal and create customized roles themselves which group some permissions together, for example:
admin: permission1,permission2,permission3
auditor:permission 3
The angular-permission doc says (https://github.com/Narzerus/angular-permission/blob/development/docs/1-manging-permissions.md#multiple-permissions) I can use PermissionStore.defineManyPermissions to define permissions which are retrieved from API after user login. That's all clear.
So I have two modules. One is the Authentication module which handles user login. The other one is the Permission module which handles the permission validation. On the Permission module .run() phase, I define the permissions like this:
var getPermissions = function () {
var deferred = $q.defer();
system.permissions.get(
function () {
return deferred.resolve(system.permissions._permissions);
},
function (error) {
console.log("error if can't load permissions");
console.log(error);
}
);
return deferred.promise;
};
var loadPermissions = function () {
var promise = getPermissions();
promise.then(function (permissions) {
var arrayPermissions = formatPermissionArray(permissions);
//var arrayPermissions=['viewSeed','viewAuthentication'];
PermissionStore.defineManyPermissions(arrayPermissions, checkPermission);
console.log("from permission run service");
console.log(arrayPermissions);
}, function (reason) {
console.log('Failed: ' + reason);
}, function (update) {
console.log('Got notification: ' + update);
});
};
loadPermissions();
var formatPermissionArray = function (sourceData) {
var formatedPermissionArray = [];
for (var i = 0; i < sourceData.length; i++) {
formatedPermissionArray.push(sourceData[i].permissionId);
};
return formatedPermissionArray;
};
But during the bootstrap of the app, this module already loaded and the arrayPermissions will be empty since user hasn't logged in yet.
I tried to use oclazyload to load the Permission module from the login controller of the Authentication module, that actually works but if user refresh/reload their page, the Permission module won't be loaded anymore.
I am new to web development and also new to AngularJs. Just a few months experience. I don't know if I am doing it in a complete wrong way.
My questions are:
The API for retrieving a permission list should require authentication? Since I will need to put those authentication on the UI-router routes. Anyone can see it anyway. If I should not protect that API, then my problem is solved.
If I should keep my api protected, how should I address the issues I described above and that is where to define the permissions for angular-permission and how to use API to retrieve the permissions.
I hope I have managed to describe my issues clearly. Any help or guidance are greatly appreciated.
Regards,
Lola
I'm using angular-permission with angular-satellizer. PermRoleStore or PermPermissionStore needs to be in run block. You can add data to JSON WEB TOKEN add use it at the run block like I did.
$auth.getPayload()This function returns payload from JWT in localStorage. And in that payload it has data with role key which I saved in backend. I hope this helps your issue.
.run(function (PermRoleStore, $auth, Yollar) {
PermRoleStore
.defineRole('ADMIN', function () {
if($auth.getPayload()) {
if ($auth.getPayload().data.role === 'ADMIN') {
return true;
}
else {
return false;
}
}
else {
return false;
}
});
PermRoleStore
.defineRole('MODERATOR', function () {
if($auth.getPayload()) {
if ($auth.getPayload().data.role === 'MODERATOR') {
return true;
}
else {
return false;
}
}
else {
return false;
}
});
})
So my Marionette application has folowing 2 routes and controllers
AuthRoute and AuthController for user login and logout
UserRoute and UserControler for user listing, new user and edit user
In AuthController when user login I need to save the user session somewhere so that it can be acceable to both these routes, So next time when user hits user listing page I can check for user session and then load the user listing page.
How can I achieve this?
Also, what will be the best way to check if user session is valid or not? My plan is to create a service which will return user details if the session is valid or else will return 401, but till the time service returns the response I can't load the route specific views.
Can someone help me on these?
Thanks in Advance
MSK
I usually save session data in a singleton Beckbone.Model referenced by the Marionette.Application.
Session Model:
var SessionModel = Backbone.Model.extend({
initialize: function () {
this.listenTo(this, 'change', function (model) {
// Manage cookies storage
// ex. using js.cookie
Cookies.set('session', model.toJSON(), {expires: 1});
});
},
checkAuth: function () {
...
},
login: function (user, password, remember) {
...
},
logout: function () {
...
}
});
Application:
var app = new Marionette.Application({
session: new SessionModel(),
...
})
app.reqres.setHandlers({
session: function () {
return app.session;
}
});
Then you can access session model from any point through "global channel":
Backbone.Wreqr.radio.channel('global').reqres.request('session').checkAuth()
So you can implement all your session procedures in the session model class that can be accessed from the whole application. Using cookies you will also save the user session in the browser.
If you use backend API for Backbone then:
How can I achieve this?
The best way for saving a user session is cookies. Use it for storing and retrieving the user authentication_token.
Also, what will be the best way to check if user session is valid or
not?
You have to store authentication_token on the backend side. For login, logout, signup you should iterate with your API.
So whenever I logout from Firebase, I got coupled
Error: permission_denied: Client doesn't have permission to access the desired data.
I understand it is because login session is terminated, some of my objects cannot access firebase data any more. But how can I disconnect this objects before logout?
For logout button in one of my Ionic View, it just call a firebase service:
function logout() {
auth.$unauth();
getCurrentUser();
};
function getCurrentUser() {
var authData = auth.$getAuth();
if (authData) {
$rootScope.userId = authData.uid;
$rootScope.currentUser = $firebaseObject(authRef.child("users").child(authData.uid));
return $rootScope.currentUser;
} else {
console.log("User is not login!");
$rootScope.userId = null;
$location.path("/auth/signin");
if ($rootScope.currentUser) {
$rootScope.currentUser.$destroy();
}
}
};
So I destroy the $rootScope.currentUser there. I use the same getCurrentUser for profile page. So the Error did not show up this way. But when in other views, which I have another $firebaseArray, and also another Ref.on("child_added", function(snap) with the same $firebaseObject. When I view the profile page, then this page with at least 3 firebase connection, I got 3 permission_denied Errors when I logout (logout button is on user profile page).
My question is, how do I disconnect this firebase connection before I logout? Is there a way disconnect ALL the firebase connection - no matter AngularFire or regular Firebase? So I can logout without worry about which firebase connection I have no close yet? Also, since the Logout button is in Profile scope and the others connection is in a different scope, I have no idea how to close the connection which is not even in the profile scope...
You need to destroy all the firebase references on logout.
Something like this.
In logout function.
function logout() {
auth.$unauth();
$rootScope.$broadcast('logout');
};
In controller
vm.profile = authService.profile(user.uid); // FirebaseObject Reference
vm.parties = partyService.getPartiesByUser(user.uid); // FirebaseArray Reference
$rootScope.$on('logout', function () {
vm.parties.$destroy();
vm.profile.$destroy();
});
well, i guess you have a button to logout.
so in your function logout() you'd first $destroy the data object, somehow wait (whichs' best practice i'm trying to figure out), and then authref.unauth();
i'd say
You need destroy the firebase ref for the object that you saved data previously. How?
Before, I initialize my var songs like:
this.songs = this.af.list('/songs');
When I signOut(), I should destroy the reference of the variable that I initialized so that I execute:
this.songs.$ref.off();
With this line, your problem
I am trying to implement a simple app that needs a login and user authentication. As I am new to backbone and marionette, I have been trying to follow the example for this tutorial: https://github.com/davidsulc/marionette-gentle-introduction
Generally I have set up a new app:
var App = new Marionette.Application({});
App.addRegions({
headerRegion : "#nav-region",
mainRegion : "#main-region"
});
App.navigate = function(route, options){
options || (options = {});
Backbone.history.navigate(route, options);
};
App.getCurrentRoute = function(){
return Backbone.history.fragment
};
App.on("start", function(){
if(Backbone.history){
Backbone.history.start();
}
});
And routers are defined in modules, e.g.:
App.module("ContentManagementApp", function(ContentManagementApp, App, Backbone, Marionette, $, _){
ContentManagementApp.Router = Marionette.AppRouter.extend({
appRoutes : {
"contentmanagement/:dsid(/:dspageclassid)": "showContentMananagement",
}
});
var API = {
showContentMananagement : function(dsid, dspageclassid){
// If not set, set to frontpage
ContentManagementApp.Show.Controller.showDSPage(dsid, dspageclassid);
App.execute("set:active:header", "contentmanagement");
},
};
App.on("contentmanagement:show", function(dsid, dspageclassid){
App.navigate("contentmanagement/" + dsid + "/" + dspageclassid);
API.showContentMananagement(dsid, dspageclassid);
});
App.addInitializer(function(){
new ContentManagementApp.Router({
controller : API
});
});
});
I would like to test if the user is logged and redirect to the login page when the app starts, but it seems like App.addInitializer is called before. Does it mean I have to do the check in each module, or can I get by it somehow?
How do you determine if the user is logged or not?
If it's a call to an API that could fail (due to the user being unauthenticated), it will probably return an HTTP error code 403. I usually do this using a global jQuery ajax.error() handler, I check if it's a 403 (Forbidden) for any of my normal API calls (model fetching and so on) and if it is, I redirect to a login url.
Otherwise, if you want to check for a cookie or similar, you should do it before calling Backbone.history.start(). Only start the app if the user is logged. :)
I just set this up in my app - in your backend when the user is logged in create a cookie/destroy it when they sign-out. Then I use the jquery-cookie-rails gem to access the cookie as $.cookie('cookie_name') and if it isn't there I route them to the signin path.
I would note - I also check to see if the user is signed on the backend when hitting different controller actions and route them appropriately. I just like the extra protection :).