Ionic 2 Login system - Help!


#1

Hi,

I’ve posted about this topic before but I’m still struggling to implement a solution. I’m trying to create a simple username and password login system that uses JWT authentication. I’ve looked for weeks at different tutorials and githubs to try and create a working solution but have had different problems including the ability to test the login on a database/server, outdated information and just being overwhelmed by the amount of things I don’t know.

I know the basic template of how to make a POST call to an api in order to login/register, I know I need an auth service etc. But I’m not sure how to incorporate JWT functionality without using something like Auth0, Passport or Firebase as every tutorial I’ve seen uses one of those. I just want a simple username and password login without social media logins as its for a more closed website.

Could someone help me develop such a system by maybe pointing me in the direction of how to get a test server/database for logging in and how to go about developing in login system itself including passing JWTs?


#2

In that case, you may be able to get away with having the client app not really know anything about JWTs except how to regurgitate them back. All the hard work is generally done on the server side.

You send a login POST with username and password, the server checks to see if it’s valid - don’t store plaintext passwords, use something like bcrypt - and if so, returns a signed JWT. Typically, you use the sub field to identify the user. Now you just stash that somewhere (using ionic-storage if you wish it to persist across app restarts), and write a wrapper for Http that looks like this:


  private _addJwtToOptions(options: RequestOptionsArgs): RequestOptionsArgs {
    if (!options) {
      options = {}
    }
    if (!options.headers) {
      options.headers = new Headers();
    }
    options.headers.append('Authorization', 'Bearer ' + this._jwt);
    return options;
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    return this._http.get(url, this._addJwtToOptions(options));
  }

  post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
    return this._http.post(url, body, this._addJwtToOptions(options));
  }

  &c &c for put, delete, and so on

As for generating the JWT, that depends on what backend language you’re going to use. I use Golang and Square’s go-jose library, so:

claims := jwt.StandardClaims{
		Subject: adminrec.Id.GoString(),
		IssuedAt: time.Now().Unix(),
	}
	authtoken := jwt.NewWithClaims(jwt.SigningMethodRS256, claims)
	stoken, err := authtoken.SignedString(ctxt.SigningKey)
    // boom: stoken is the JWT to send back to client