ionic-framework


Ionic2 JWT authentication failed with Django rest framework backend


I am building an Ionic 2 app and I am trying to use JWT to authenticate my users as shown here: https://auth0.com/blog/2016/02/18/ionic-2-authentication-how-to-secure-your-mobile-app-with-jwt/.
On clicking 'login' server sends back the token which I can see in my developer console network, however I get following error on console: (Error in build/pages/profile/profile.html:8:29 & ORIGINAL EXCEPTION: Error: JWT must have 3 parts.)Additionally I have to clear cookies everytime!
My profile.ts:
import {Page, Storage, LocalStorage} from 'ionic-angular';
import {Http, Headers} from '#angular/http';
import {FORM_DIRECTIVES} from '#angular/common';
import {JwtHelper} from 'angular2-jwt';
import {AuthService} from '../../services/auth/auth.service';
import 'rxjs/add/operator/map';
import { NavController, NavParams } from 'ionic-angular';
import { StartPage } from '../start/start.component';
#Page({
templateUrl: 'build/pages/profile/profile.html',
directives: [FORM_DIRECTIVES]
})
export class ProfilePage {
LOGIN_URL: string = " http://127.0.0.1:8000/rest-auth/login/";
SIGNUP_URL: string = "http://127.0.0.1:8000/rest-auth/registration/";
auth: AuthService;
// When the page loads, we want the Login segment to be selected
authType: string = "login";
// We need to set the content type for the server
contentHeader: Headers = new Headers({"Content-Type": "application/json"});
error: string;
jwtHelper: JwtHelper = new JwtHelper();
local: Storage = new Storage(LocalStorage);
user: string;
constructor(private http: Http, public nav:NavController) {
this.auth = AuthService;
this.local.get('profile').then(profile => {
this.user = JSON.parse(profile);
}).catch(error => {
console.log(error);
});
}
login(credentials) {
this.http.post(this.LOGIN_URL, JSON.stringify(credentials), { headers: this.contentHeader })
.map(res => res.json())
.subscribe(
data => this.authSuccess(data.id_token),
err => this.error = err
);
}
signup(credentials) {
this.http.post(this.SIGNUP_URL, JSON.stringify(credentials), { headers: this.contentHeader })
.map(res => res.json())
.subscribe(
data => this.authSuccess(data.id_token),
err => this.error = err
);
}
logout() {
this.local.remove('id_token');
this.user = null;
}
authSuccess(token) {
this.error = null;
this.local.set('id_token', token);
this.user = this.jwtHelper.decodeToken(token);
}
}
My service:
import {tokenNotExpired} from 'angular2-jwt';
export class AuthService {
constructor() {}
public static authenticated() {
return tokenNotExpired();
}
}
My profile.html:
<!-- app/profile/profile.html -->
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Profile</ion-title>
</ion-navbar>
<ion-content class="login" *ngIf="!auth.authenticated()">
<div padding>
<ion-segment [(ngModel)]="authType">
<ion-segment-button value="login">
Login
</ion-segment-button>
<ion-segment-button value="signup">
Signup
</ion-segment-button>
</ion-segment>
</div>
<div [ngSwitch]="authType">
<form *ngSwitchWhen="'login'" #loginCreds="ngForm" (ngSubmit)="login(loginCreds.value)">
<ion-item>
<ion-label>Username</ion-label>
<ion-input type="text" ngControl="email"></ion-input>
</ion-item>
<ion-item>
<ion-label>Password</ion-label>
<ion-input type="password" ngControl="password"></ion-input>
</ion-item>
<div padding>
<button block type="submit">Login</button>
</div>
</form>
<form *ngSwitchWhen="'signup'" #signupCreds="ngForm" (ngSubmit)="signup(signupCreds.value)">
<ion-item>
<ion-label>Username</ion-label>
<ion-input type="text" ngControl="username"></ion-input>
</ion-item>
<ion-item>
<ion-label>Password</ion-label>
<ion-input type="password" ngControl="password"></ion-input>
</ion-item>
<div padding>
<button block type="submit">Signup</button>
</div>
</form>
</div>
<div padding>
<p *ngIf="error" class="error">{{ error._body }}</p>
</div>
</ion-content>
<ion-content>
<div *ngIf="auth.authenticated()">
<div padding>
<h1>Welcome, {{ user }}</h1>
<button block (click)="logout()">Logout</button>
</div>
</div>
</ion-content>
On successful login I would like to navigate to a specific page. What's going wrong and how can I fix this?
Also, the token I get back from my backend (I am using Django-rest-auth in my backend for authentication):

Related Links

Ionic v1 format url
Ionic - Dynamic content inside ionic modal prevents to scroll upward
Disabling slide - ionicLoading?
How to update to angular 1.5
ion-avatar doesn't work but item-avatar does
set date default ion-datetime Ionic v-2
How to define a new controller in Ionic Creator?
Ionic 1 - Change the order of $ionicHistory
Ionic2 - setRoot on logout/login crashes navigation
Push Notification receive on device after deleting it from ionic.io
How can I add my current location to Firebase?
Crosswalk webview certificates error on latest version (23+)
Wordpress Api custom api is not working
replacing <img> to <ion-img> and images are very small
cordova-plugin-filepath is not install ionic2 - Solved
Can't resolve all parameters for Storage: (?) - Angular JWT App Module

Categories

HOME
xamarin
image-processing
isabelle
relayjs
fme
youtube-dl
google-docs
rdf
fingerprint
enterprise-library-5
directx
virtualization
quickbooks
nstableview
timeout
remote-access
hapi
workload-scheduler
facebook-page
angular-ui
custom-wordpress-pages
intentfilter
dxf
maxmind
log4js-node
google-cloud-nl
flink-streaming
nameservers
semantic-versioning
lxd
protovis
geopositioning
hexo
fusionpbx
android-ble
host
streamsets
lumberjack
trim
squib
eigenvalue
vao
total-commander
btrace
parentheses
pnotify
dotnetzip
elgg
feeds
lift-json
dynamics-sl
nested-sets
removechild
thrust
google-web-starter-kit
master-slave
natvis
hsv
srand
icu4j
wireshark-dissector
coveralls
createprocessasuser
nsight
unity5.2.3
dereference
c++03
oxwall
qpainter
winddk
cctv
codeigniter-routing
id3v2
titanium-modules
marmalade
mechanize-ruby
hyprlinkr
typo3-neos
intentservice
dataservice
android-screen-support
limejs
sublist
google-email-migration
pysimplesoap
hirefire
heartbeat
joyent
android-sdk-2.1
google-friend-connect
sudzc
subviews
sproutcore-2
gin
user-friendly
geneva-server

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App