Ionic login and the mess


#1

Hello everyone, for last few days i tried to figure out how to make application with login system, (need log in to use app properly ). My target is to login to wordpress site using wp restapi.

The biggest problem i wasn’t able to find anything working for current app ( btw finding anything that works for latest ionic is a nightmare )

My Question is: How and whats best practice to login to page and safely hold information’s about session?

What exactly i need ( i think ) is:

  1. Create form - got it
  2. Create event on form submit - got it
  3. Send the username and password to my wp restapi controller
  4. (after successful login ) Hold information about logged account in session
  5. Normally use app with, i will need to make many requests do get data from server so i thought about making some module which will control and send requests ( safely with authentication ).

*EDIT
heres WP REST Api Authentication

But i can’t find anything to work!

Here’s my code as I’m writing this topic.

import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { Http, Headers } from '@angular/http';

@Component({
	selector: 'page-login',
	templateUrl: 'login.html'
})
export class LoginPage {
	private loginData: FormGroup;

	constructor( private formBuilder: FormBuilder, private http: Http) {
		this.loginData = this.formBuilder.group({
			username: ['', Validators.required],
			password: ['', Validators.required],
		});
	}

	login(){

		let headers = new Headers();
	    headers.append('Content-Type', 'json');
		console.log(headers);

	    let data = {
			action: "login",
	    	username: this.loginData.value.username,
	    	password: this.loginData.value.password
	    };
		console.log(data);
		this.http.post('http://demo.wp-api.org/wp-json/wp/v2/posts', JSON.stringify(data), { headers: headers })
		.subscribe(res => {
			console.log(res.json());
		}, (err) => {
				console.log(err);
		});
	}

}

There is few things that i completely or particularly don’t understand:

  1. I tried to use Angular $http, but this.http() is said not to be a function, meanwhile on Angular documentation this should work as a normal function
$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
  }, function errorCallback(response) {
  });
  1. Ionic authentication.
    Ionic Auth has been deprecated. As of January 31, 2018, we will no longer provide the Ionic Auth user authentication service.
    Its not gonna be supported after January 31 2018 but should i still use it? Anyway i tried because i didn’t find any other way to authenticate but i got Cannot find '@ionic/cloud-angular'.

  2. Why there is such a mess about information’s about Ionic ummmk 2/3? I see im using version 3.6.0 but documentation is for v1 and v2. Srsly this is one big mess for me! :frowning:


#2

Latest news is that Ionic is in talks with other auth providers. So it’s in a state of flux.


#3

Angular and AngularJS are different things.

You are probably looking at unrelevant docs then. But as you didn’t tell us what exactly you mean, no idea to know.

Post your ionic info output so we get an idea what you are working with.


#4

Ionic Auth makes no sense with your usecase anyway, so just forget that.


#5

I just skimmed that link OP provided, and it has a brief mention of a plugin to allow JSON Web Tokens. If at all possible, use that. It’s the best available technology for authentication in web apps today.

Incidentally, I have been seeing this code a lot recently:

login(){

		let headers = new Headers();
	    headers.append('Content-Type', 'json');
		console.log(headers);

	    let data = {
			action: "login",
	    	username: this.loginData.value.username,
	    	password: this.loginData.value.password
	    };
		console.log(data);
		this.http.post('http://demo.wp-api.org/wp-json/wp/v2/posts', JSON.stringify(data), { headers: headers })
		.subscribe(res => {
			console.log(res.json());
		}, (err) => {
				console.log(err);
		});
	}

Angular’s Http is smarter than you’re giving it credit for. You do not need to manually call JSON.stringify() or declare any content type manually (json isn’t even a valid content type). Simply pass your data object (which should have a more descriptive name) directly as the body parameter to post() and let Http autodetect and autodeclare the content type.


#6

Thanks guy’s for all the replies, it really helped out in my research.

So here’s what I’ve got:

I did a lecture about authentication methods and best article I found: blog.risingstack.com

After checking out Wordpress REST API i thought the best method will be JWT Authentication using Plugin JWT Authentication for WP REST API

I need to make more research about jwt authentication librares, for now i found
NodeJs JWT auth and Ionic with JWT authentication topic using angular2-jwt.

I will keep this topic up-to-date to my work, hope helps someone in the future.

@offtopic

I would like to create this project to some kind of module or injectable, can somone show me the way how to properly do this?
Also i couldn’t find method import for example import { HttpModule } from '@angular/http'; to all my pages. I need some way like supercontroller over all pages, kinda think it is just app and need to do more research.

Anyway when i start writing that all I’m gonna share it on the GitHub so everybody can have access to it.

replies

Yeah i finally found out what it is all about.
I would say it’s like we have 2 versions of ionic. Ionic 1 and Ionic which ionic from 2.0 to 3.6.0 version which shares same documentation as i understand. Same for AngularJs and Angular2.

I just thought Ionic 2 and Ionic 3 are not the same thing and should have some separated documentation.

Yeah i copied this from web, didn’t have a closer look.

Oh and in the end checking typos and everything after all the lectures I realized You mentioned JWT. Well… lecture was cool for me anyway :joy:


#7

I am in this page because I have not done the login in authentication. I am looking for a simple flow on the user registration and authentication. There should be a very basic flow for authentication as this process existed decades. I am looking for that simple flow, or simple API. I hope Ionic team reach a decision to enable a seamless authentication process.

On a side note, there are a lot of people making tutorials. Some are great, some are mediocre, and some are out of sync with the ever growing tool/API versions.


#8

Authentication is hard, and in general there is an inverse relationship between security and usability. If you understand the technical issues involved, you shouldn’t be complaining about lack of “very basic flow”. If you don’t, you should contract with somebody who does. This is not something that should be done half-assed.


#9

Yes, and water is wet :wink: