All Articles

Configure grpc-web typescript authentication

GRPC-WEB interceptor authentication in typescript


Access an authenticated grpc service using grpc-web


Use interceptors to add the Authorization header for each request. (Or any other header for that matter)

Grpc-web version

For this to work you need grpc-web version >= 1.1.0. Latest version is 1.2.1

Interceptor implementation

class AuthInterceptor {
  token: string

  constructor(token: string) {
    this.token = token

  intercept(request: any, invoker: any) {
    const metadata = request.getMetadata()
    metadata.Authorization = 'Bearer ' + this.token
    return invoker(request)

Add the interceptor

    const authInterceptor = new AuthInterceptor(token)
    options = {
      unaryInterceptors: [authInterceptor],
      streamInterceptors: [authInterceptor]
    const service = new GrpcServicePromiseClient(

Now every call to the grpc service will have the Authorization header with the provided token.

Published May 10, 2020

Software engineer.