aws-mobile-appsync-sdk-js icon indicating copy to clipboard operation
aws-mobile-appsync-sdk-js copied to clipboard

How to add Authorization to Header

Open kodai305 opened this issue 3 years ago • 2 comments

I'm trying to use this module to perform Mutations and Subscriptions.

When the authentication method is API_KEY, it worked without any problem, but I am having trouble when adopting LAMBDA authentication.

Specifically, I want to send Authorization in Header, but I don't know how to implement it.

Could you please tell me how to set the Header?

kodai305 avatar Nov 05 '21 07:11 kodai305

Hi @kodai305! Thanks for filing this issue. Wondering if I can get more context from you. Which packages are you using, and what versions? Additionally, what platform are you using (React, React Native, etc). Additionally, if you have any code snippets of how you are instantiating your client, that would be tremendously helpful. Thanks!

david-mcafee avatar Nov 16 '21 00:11 david-mcafee

@david-mcafee, we are working to do something similar. We are using React. We are instantiating the client like this:

import { ApolloLink } from "apollo-link";
import { setContext } from "apollo-link-context";
import { createHttpLink } from "apollo-link-http";
import { Auth } from "aws-amplify";
import AWSAppSyncClient, { AUTH_TYPE, createAppSyncLink } from "aws-appsync";

const getToken = async (userPoolId) => {
    const session = await Auth.currentSession();
    const jwt = await session.getAccessToken().getJwtToken();
    return jwt + "//" + userPoolId;
};

const getClient = async (endpoint, apiKey, region, userPoolId) => {
    const token = await getToken(userPoolId);

    const config = {
        disableOffline: true,
        url: endpoint,
        region: region,
        auth: {
            type: AUTH_TYPE.AWS_LAMBDA,
            authToken: token,
        },
    };

    return new AWSAppSyncClient(config, {
        link: createAppSyncLink({
            ...config,
            resultsFetcherLink: ApolloLink.from([
                setContext((request, previousContext) => {
                    return {
                        headers: {
                            ...previousContext.headers,
                            Authorization: token,
                        },
                    };
                }),
                createHttpLink(config),
            ]),
        }),
    });
};

export default getClient;

The issue I am having is that queries are working while subscriptions are not base64 encoding the custom Authorization parameter. The header is dropped somewhere during subscription initialization.

Packages:

    "@apollo/client": "^3.3.11",
    "@aws-amplify/ui-react": "^0.2.8",
    "apollo-link": "^1.2.14",
    "apollo-link-context": "^1.0.20",
    "apollo-link-http": "^1.5.17",
    "aws-amplify": "^3.0.17",
    "aws-appsync": "^4.0.3",

Route created by the subscription opening in the network tab:

Request URL: wss://ktaeekkmpvf7pjawfi5aviy4q4.appsync-realtime-api.us-east-2.amazonaws.com/graphql?header=eyJob3N0Ijoia3RhZWVra21wdmY3cGphd2ZpNWF2aXk0cTQuYXBwc3luYy1hcGkudXMtZWFzdC0yLmFtYXpvbmF3cy5jb20ifQ==&payload=e30=

Notice, the base64 decoded version of the header param in the URL does not have the headers I input.

langerkirill avatar Feb 01 '22 18:02 langerkirill