CODEWITHSUNDEEP
angularapikey
user9213774
user9213774

Reputation:

How to hide an API Key with Angular 8.0.2

I'm trying to call the twitch API. To call this api we need to specify a user key. How can i hide the key in my code? I have no idea how to do.

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.800.2 (cli-only)
@angular-devkit/core         8.0.2 (cli-only)
@angular-devkit/schematics   8.0.2 (cli-only)
@schematics/angular          8.0.2 (cli-only)
@schematics/update           0.800.2 (cli-only)
rxjs                         5.5.12

in my app.component.ts file

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaderResponse, HttpHeaders, HttpResponse, HttpErrorResponse } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'TwitchApp';
  twitch_api_key:string = 'test';
  twitch_api_Url:string = 'https://api.twitch.tv/helix/users?id=44322889';
  limit:string = '10';

  constructor(private http: HttpClient,){}

  ngOnInit(){
    this.request();
  }
  request(){
    let header = new HttpHeaders({
      'Client-ID': this.twitch_api_key
    })
    var options = {headers: header}
    this.http.get(this.twitch_api_Url,options).subscribe(
      res => {
        console.log(res)
      },
      (err: HttpErrorResponse) => {
        console.log(err.error);
        console.log(err.name);
        console.log(err.message);
        console.log(err.status);
      }
    )
  }
}

In the main.js in web browser

    constructor(http) {
        this.http = http;
        this.title = 'TwitchApp';
        this.twitch_api_key = 'test';
        this.twitch_api_Url = 'https://api.twitch.tv/helix/users?id=44322889';
        this.limit = '10';
    }

Thanks

Upvotes: 6

Views: 19360

Answers (2)

Chase Gibbons
Chase Gibbons

Reputation: 103

With a proxy you have the same exact issue. Because the proxy just serves as a middleman between the client and your api therefore you now still have to authenticate the proxy somehow or else people can just look in the console and find out how to hit the proxy to return what they want from your api; therefore proxies are more or less just kicking the can down the road in my opinion.

To answer this question once and for all, you either need to look into oauth2 client grants or else like start server-side rendering everything. I’m sure there are other techniques that are just as effective as those two solutions however alternative solutions to this problem which are truly secure are hard to find.

Upvotes: 5

Nelson S
Nelson S

Reputation: 84

This was answered in this question: How to secure the JavaScript API Access Token?

The summary is that there is no way to completely hide the API key in your client-side code. If you are making the request straight from your client-side code, no matter what you do, anyone can go into the browsers dev-tools and get your API key.

When I've encountered this issue in the past with a key with absolutely do not want to expose, I've solved it by proxying by creating an API. In that case the API key is safely in the API code, which is secure since it's server-side. Your client-side code would then call your API, instead of the Twitch API. Your API (server code) would then call Twitch and return the result back to your client. That's pretty much the only way to keep that key completely secret.

Upvotes: 3

Related Questions