| lodash | true | ||||||
|---|---|---|---|---|---|---|---|
| title | Ionic Framework Tutorial | ||||||
| name | Ionic | ||||||
| alias |
|
||||||
| language |
|
||||||
| framework |
|
||||||
| hybrid | true | ||||||
| image | //auth0.com/lib/platforms-collection/img/phonegap.png | ||||||
| tags |
|
||||||
| snippets |
|
Otherwise, if you already have an existing application, please follow the steps below.
Go to the Application Settings section in the Auth0 dashboard and make sure that Allowed Callback URLs contains the following value:
https://@@account.namespace@@/mobileAlso, if you are testing your application locally, make sure to add your local URL as an Allowed Callback URL and the following as an Allowed Origin (CORS):
file://\*Add the following dependencies to the bower.json and run bower install:
@@snippet(meta.snippets.dependencies)@@
<!-- Auth0 Lock -->
<script src="lib/auth0-lock/build/auth0-lock.js"></script>
<!-- auth0-angular -->
<script src="lib/auth0-angular/build/auth0-angular.js"></script>
<!-- angular storage -->
<script src="lib/a0-angular-storage/dist/angular-storage.js"></script>
<!-- angular-jwt -->
<script src="lib/angular-jwt/dist/angular-jwt.js"></script>You must install the InAppBrowser plugin from Cordova to be able to show the Login popup. For that, just run the following command:
ionic plugin add org.apache.cordova.inappbrowserand then add the following configuration to the config.xml file:
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
<param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser" />
</feature>Add the auth0, angular-storage and angular-jwt module dependencies to your angular app definition and configure auth0 by calling the init method of the authProvider
@@snippet(meta.snippets.setup)@@
Now we're ready to implement the Login. We can inject the auth service in any controller and just call signin method to show the Login / SignUp popup.
In this case, we'll add the call in the login method of the LoginCtrl controller. On login success, we'll save the user profile, token and refresh token into localStorage
@@snippet(meta.snippets.use)@@
Note: there are multiple ways of implementing login. What you see above is the Login Widget, but if you want to have your own UI you can change the
<script src="//cdn.auth0.com/js/auth0-lock-6.js">for<script src="//cdn.auth0.com/w2/auth0-2.1.js">. For more details check the GitHub repo.
You can just call the signout method of Auth0 to log the user out. You should also remove the information saved into localStorage:
$scope.logout = function() {
auth.signout();
store.remove('profile');
store.remove('token');
}<input type="submit" ng-click="logout()" value="Log out" />As we're going to call an API we did<%= configuration.api ? ' on ' + configuration.api : '' %>, we need to make sure we send the JWT token we receive on the login on every request. For that, we need to do the add the jwtInterceptor to the list of $http interceptors. Also, as JWTs expire, we'll use the refreshToken to get a new JWT if the one we have is expired:
// app.js
myApp.config(function (authProvider, $routeProvider, $httpProvider, jwtInterceptorProvider) {
// ...
jwtInterceptorProvider.tokenGetter = function(store, jwtHelper, auth) {
var idToken = store.get('token');
var refreshToken = store.get('refreshToken');
// If no token return null
if (!idToken || !refreshToken) {
return null;
}
// If token is expired, get a new one
if (jwtHelper.isTokenExpired(idToken)) {
return auth.refreshIdToken(refreshToken).then(function(idToken) {
store.set('token', idToken);
return idToken;
});
} else {
return idToken;
}
}
$httpProvider.interceptors.push('jwtInterceptor');
// ...
});Now, you can regularly call your API with $http, $resource or any rest client as you'd normally do and the JWT token will be sent on every request.
After the user has logged in, we can get the profile property from the auth service which has all the user information:
<span>His name is {{auth.profile.nickname}}</span>// UserInfoCtrl.js
function UserInfoCtrl($scope, auth) {
$scope.auth = auth;
}You can click here to find out all of the available properties from the user's profile. Please note that some of this depend on the social provider being used.
We already saved the user profile and tokens into localStorage. We just need to fetch them on page refresh and let auth0-angular know that the user is already authenticated.
angular.module('myApp', ['auth0', 'angular-storage', 'angular-jwt'])
.run(function($rootScope, auth, store, jwtHelper, $location) {
// This events gets triggered on refresh or URL change
var refreshingToken = null;
$rootScope.$on('$locationChangeStart', function() {
var token = store.get('token');
var refreshToken = store.get('refreshToken');
if (token) {
if (!jwtHelper.isTokenExpired(token)) {
if (!auth.isAuthenticated) {
auth.authenticate(store.get('profile'), token);
}
} else {
if (refreshToken) {
if (refreshingToken === null) {
refreshingToken = auth.refreshIdToken(refreshToken).then(function(idToken) {
store.set('token', idToken);
auth.authenticate(store.get('profile'), idToken);
}).finally(function() {
refreshingToken = null;
});
}
return refreshingToken;
} else {
$location.path('/login');
}
}
}
});
});Now it's time to sit back, relax and open a beer. You've implemented Login and Signup with Auth0 and Ionic.
This means that the InAppBrowser plugin wasn't installed successfully by Cordova. Try any of the followings to fix this.
- Reinstall the
InAppBrowserplugin
ionic plugin remove org.apache.cordova.inappbrowser
ionic plugin add org.apache.cordova.inappbrowser- Remove the platform and re add it
ionic platform remove ios
ionic platform add ios- Copy the contents from the plugin to the platform plugins
cp plugins/org.apache.cordova.inappbrowser/src/ios/* platforms/ios/[yourAppName]/Plugins/org.apache.cordova.inappbrowser/This means that the InAppBrowser plugin wasn't installed successfully by Cordova. See the previous section to learn how to solve this.