CODEWITHSUNDEEP
springionic-frameworkionic2ionic3
user1935987
user1935987

Reputation: 3347

Authenticating my Ionic 3 app against Spring Boot REST API

The question must be very typical, but I can't really find a good comparison.

I'm new to Ionic & mobile dev. We have a REST API (Spring Boot). API is currently used by AngularJS 1.5 front-end only. AngularJS app is authenticated based on the standard session-based authentication.

What should I use to authenticate an ionic 3 app? As I understand, have 2 options:

  1. Use the same auth as for Angular front-end.
  2. implement oauth2 on the back-end and use the token for the ionic app.

As for now, I understand that implementing oauth2 at back-end is a way to go because with the option #1 I should store the username & password in the local storage (ionic app), which is not safe. Otherwise, if I don't do that - the user will have to authenticate each time the app was launched. Am I right?

So, that leaves me with option #2 - store oauth2 token on the device?

Upvotes: 1

Views: 1253

Answers (2)

user1935987
user1935987

Reputation: 3347

The final solution i've made:

ionic app:

implemented a jwt token storage similar to Swapnil Patwa answer.

Spring back-end:

Tried to use their original ouath2 package, but found out that as always with spring/java, configs are too time-consuming => made a simple filter which is checking for the manually generated & assigned jwt token.

Upvotes: 1

Swapnil Patwa
Swapnil Patwa

Reputation: 4099

Good to go with #2. Here is how i manage token. I use ionic storage to store token and a provider config.ts which hold the token during run time.

config.ts

import { Injectable } from '@angular/core';  
@Injectable()
export class TokenProvider { 
    public token: any;
    public user: any = {}; 

  constructor(  ) { }
  setAuthData (data) { 
    this.token = data.token; 
    this.user = data
  }
  dropAuthData () {
    this.token = null;
    this.user = null;
  }
}

auth.ts

import { TokenProvider} from '../../providers/config';

constructor(public tokenProvider: TokenProvider) { }

login() {
      this.api.authUser(this.login).subscribe(data => {
        this.shared.Loader.hide(); 
          this.shared.LS.set('user', data); 
          this.tokenProvider.setAuthData(data); 
          this.navCtrl.setRoot(TabsPage); 
      }, err => {
        console.log(err);
        this.submitted = false;
        this.shared.Loader.hide();
        this.shared.Toast.show('Invalid Username or Password');
        this.login.password = null;
      });
}

and i do a check when app launch. app.component.ts (in constructor)

shared.LS.get('user').then((data: any) => {
      if (!data) {
        this.rootPage = AuthPage;
      } else {
        tokenProvider.setAuthData(data);
        this.rootPage = TabsPage;
      } 
    });

api.provider.ts

  updateUser(data): Observable < any > {
        let headers = new Headers({
            'Content-Type': 'application/json',
            'X-AUTH-TOKEN': (this.tokenProvider.token)
        });
    return this.http.post(`${baseUrl}/updateUser`, JSON.stringify(data), {
            headers: headers
        })
        .map((response: Response) => {
            return response.json();
        })
        .catch(this.handleError);
}

And last logout.ts

  logOut(): void {
    this.shared.Alert.confirm('Do you want to logout?').then((data) => {
      this.shared.LS.remove('user').then(() => {
        this.tokenProvider.dropAuthData();
        this.app.getRootNav().setRoot(AuthPage);
      }, () => {
        this.shared.Toast.show('Oops! something went wrong.');
      });
    }, err => {
      console.log(err);
    })

  }

Upvotes: 1

Related Questions