Document how to get encoded access token

[Glydric]

Description

I was developing an application in dart when I found out that the jwt value i was getting printing directly
let ses = await Amplify.Auth.fetchAuthSession() safePrint(ses);
is different that the one obtained using
final tokens = ses.toJson()["userPoolTokens"] as CognitoUserPoolTokens; safePrint(tokens.accessToken.encode().toString());
that should be used to extract the user pool token.

I found out that the signature is equal, but using the second method it was someway reformatting the token and obtain a different base 64 value. that is instead wrong
Indeed the first can be verified with jwt.io, while the latter is impossible to verify.
This is a real problem as I seen from previous issues that I'm not the only one that founds out this problem. but maybe I just discovered this difference.
I just discovered this on an iPhone 15 with ios 17.5, build using flutter 3.19.5 and dart 3.3.3 on macos 14.5

Categories

• Analytics
• API (REST)
• API (GraphQL)
• Auth
• Authenticator
• DataStore
• Notifications (Push)
• Storage

Steps to Reproduce

let ses = await Amplify.Auth.fetchAuthSession()
safePrint(ses); // Correct accessToken jwt
final tokens = ses.toJson()["userPoolTokens"] as CognitoUserPoolTokens;
safePrint(tokens.accessToken.encode().toString()); // Wrong accessToken jwt

Screenshots

No response

Platforms

• iOS
• Android
• Web
• macOS
• Windows
• Linux

Flutter Version

3.19.5

Amplify Flutter Version

2.1.0

Deployment Method

Custom Pipeline

Schema

No response

[Glydric]

Correcting myself the problem is not about the two methods but is about using encode function, just don't use it and instead use toJson(), so use the following implementation

final cognitoPlugin = Amplify.Auth.getPlugin(AmplifyAuthCognito.pluginKey);
final result = await cognitoPlugin.fetchAuthSession();
final token = result.userPoolTokensResult.value.accessToken.toJson();

the token then can be used to sign any request (I can now verify in the backend)

[Jordan-Nelson]

Hi @Glydric I think the difference you are noticing is due to the difference between the .json(), .encode(), and .toString() methods on JsonWebToken. You can see those three functions below.

amplify-flutter/packages/auth/amplify_auth_cognito_dart/lib/src/jwt/src/token.dart

Lines 85 to 98 in 3fe76c0

	@override
	String toJson() => raw;
	@override
	String toString() => prettyPrintJson({
	'header': header.toJson(),
	'claims': claims.toJson(),
	'signature': base64Encode(signature),
	});
	/// Encodes the JWT to a `.`-delimited string.
	String encode() => '${header.encodeBase64()}.'
	'${claims.encodeBase64()}.'
	'${base64RawUrl.encode(signature)}';

Note that toJson calls .raw which in turn calls .encode()

amplify-flutter/packages/auth/amplify_auth_cognito_dart/lib/src/jwt/src/token.dart

Lines 65 to 66 in 3fe76c0

	/// The raw, encoded JWT string.
	String get raw => _raw ?? encode();

In the first example (let ses = await Amplify.Auth.fetchAuthSession() safePrint(ses);) .toString() will be used where in the other examples .json() or .encode() is used.

It sounds like you may have already found a solution to the issue you were facing, but let me know if that is not the case.

[Glydric]

Hi @Jordan-Nelson, yes, I already found a solution, but I think that this can be a bit confusing for any new developer here and like me will lost a lot of time trying to get the correct JWT. Also I didn't read anything about this important difference on the amplify website, so I created this issue not only to find a final solution but also to help others.

[Jordan-Nelson]

There are API docs for .raw and .encode(). .toString() is only overridden for debugging purposes. It really is not intended to be used in other contexts.

Were you expecting .toString() to return the encoded token?

[Jordan-Nelson]

We have labeled this as a docs issue. We will look to add some info to the main docs site to make this more clear.