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 App 2 Launch Calculator
When to create a new component vs. using ngIf/ngShow?
On iOS only, After $ionicDeploy.load(), cordova.js not loaded/found
Cannot read property '__zone_symbol__originalInstance' of null
Error: Could not find or load main class org.gradle.wrapper.GradleWrapperMain ionic
Use Dwolla for peer to peer money transfer in ionic 1 app
ionic 2 Not able to download ios build from ionic.io
Freeze Table column 1 and scroll other columns in ionic 2
How to make the searchbar search in ionic cards?
How to keep both ionic 1, 3, version in my system
IONIC v2, iOS PUSH, How to catch errors on register
Conference Template Error on Ionic 2
How to close the ionic app, when testing using appium and protractor
Install ionic version 2 instead of version 3 [duplicate]
ionic: Starter app with -v1
Upgrade Ionc to latest version

Categories

HOME
ibm-bluemix
pandas
vim
atom-editor
webpack
cookies
zeromq
magnific-popup
image-processing
smarty
stock
platform-builder
alfresco
android-4.4-kitkat
q
c#-2.0
installshield
azure-media-services
export-to-csv
orchardcms
dtrace
hex-editors
visual-studio-cordova
ef-migrations
serilog
propel
karma-jasmine
emulator
java-3d
scriptcs
functional-testing
arabic
facebook-instant-articles
mustache.php
pass-by-reference
restful-authentication
opennlp
libuv
subdomains
gsoap
uisplitview
semantic-versioning
fog
winrt-xaml-toolkit
perlin-noise
accelerate-framework
language-concepts
hexo
io-redirection
jquery-bootgrid
mapzen
gzipstream
texmaker
node-gyp
nand2tetris
password-encryption
s
sencha-touch-2.3
convertapi
parentheses
pango
sage-one
minimization
setuptools
android-fonts
intrusion-detection
thrust
superstack
master-slave
php-parse-error
spim
maven-tomcat-plugin
eclipse-clp
quicklisp
wyam
embedded-code
deis
nsight
p2
skos
camanjs
network-interface
gui-test-framework
android-nested-fragment
html-helper
android-radiobutton
resty-gwt
mysqltuner
commoncrypto
apc
coverflow
file-locking
pushbackinputstream
seed
tinn-r
angularjs-controller
libstdc++
broken-links
first-responder
javaspaces
newtonscript
reddot
nsdatecomponents
libc++
window-management
coercion
ecl
winbugs14
celltable
virtual-functions
uimenucontroller
sector

Resources

Database Users
RDBMS discuss
Database Dev&Adm
javascript
java
csharp
php
android
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App