react-native-pure-jwt icon indicating copy to clipboard operation
react-native-pure-jwt copied to clipboard

Custom Header

Open brianhiss opened this issue 3 years ago • 2 comments

Is your feature request related to a problem? Please describe. I'm curious if you have it on your roadmap to support a custom header?

Describe the solution you'd like Certain 3rd Party vendors (i.e. Twilio) require adding custom keys to the header:

{
  "typ": "JWT",
  "alg": "HS256",
  "cty": "twilio-fpa;v=1" 
}

Describe alternatives you've considered I've looked into going with a pure JS implementation, but those have their issues as well. They'll work in a Node.js environment, but not with the React Native or Hermes JS runtime.

Additional context You can read more about Twilio's custom header requirement here: https://www.twilio.com/docs/iam/access-tokens#jwt-format

brianhiss avatar Dec 21 '21 22:12 brianhiss

I have implemented this in Android. Here is the relevant patch-package:

diff --git a/node_modules/react-native-pure-jwt/android/src/main/java/com/zaguiini/RNPureJwt/RNPureJwtModule.java b/node_modules/react-native-pure-jwt/android/src/main/java/com/zaguiini/RNPureJwt/RNPureJwtModule.java
index 7e5750d..650db57 100644
--- a/node_modules/react-native-pure-jwt/android/src/main/java/com/zaguiini/RNPureJwt/RNPureJwtModule.java
+++ b/node_modules/react-native-pure-jwt/android/src/main/java/com/zaguiini/RNPureJwt/RNPureJwtModule.java
@@ -157,10 +157,12 @@ public class RNPureJwtModule extends ReactContextBaseJavaModule {
     @ReactMethod
     public void sign(ReadableMap claims, String secret, ReadableMap options, Promise callback) {
         String algorithm = options.hasKey("alg") ? options.getString("alg") : "HS256";
+        String myParam = options.hasKey("myParam") ? options.getString("myParam") : "";
         JwtBuilder constructedToken = Jwts.builder()
                 .signWith(SignatureAlgorithm.forName(algorithm), this.toBase64(secret))
                 .setHeaderParam("alg", algorithm)
-                .setHeaderParam("typ", "JWT");
+                .setHeaderParam("typ", "JWT")
+                .setHeaderParam("myParam", myParam);
 
         Set<Map.Entry<String, Object>> entries = claims.toHashMap().entrySet();
 
diff --git a/node_modules/react-native-pure-jwt/js/index.d.ts b/node_modules/react-native-pure-jwt/js/index.d.ts
index 763e7a7..53469f0 100644
--- a/node_modules/react-native-pure-jwt/js/index.d.ts
+++ b/node_modules/react-native-pure-jwt/js/index.d.ts
@@ -5,6 +5,7 @@ export interface DecodeResponse {
 
 export interface SignOptions {
   alg: 'HS256' | 'HS384' | 'HS512'
+  myParam: string
 }
 
 export interface DecodeOptions {

Replace "myParam" with param of your choice. I'm trying to figure out how to do this in IOS...

Dror-Bar avatar May 30 '22 13:05 Dror-Bar

Thanks, @Dror-Bar! If you successfully implement this for iOS too, please consider creating a PR!

zaguiini avatar Jun 16 '22 13:06 zaguiini