awslabs / aws-mobile-appsync-sdk-js

JavaScript library files for Offline, Sync, Sigv4. includes support for React Native
Apache License 2.0
921 stars 266 forks source link

How to add Authorization to Header #692

Open kodai305 opened 2 years ago

kodai305 commented 2 years ago

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?

david-mcafee commented 2 years ago

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!

langerkirill commented 2 years ago

@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.