Problem with Authentication using Apollo and React-native

Question

I have this authentication issue

The registration works perfectly and the servers take the registration data: User password email and number. After this step, I have OTP verification

I got the pin code and run the verification mutation. On the verification, I got the error :

You are not authenticated

And the all process stops because I am not verified

Here is the code for the react-native part

const VERIFY = gql
mutation($token: String!, $kind: TokenKind!) {
    verify(token: $token, kind: $kind)
}
const VerificationScreen: React.FC < any > = (props) => {
        const token = (props as any).route.params.token;
        const [loading, setLoading] = React.useState < boolean > (false)
        const [pin, setPin] = useState < string > ('')
        const [veryfy] = useMutation(VERIFY)
        const verifyPin = () => {
            if (!pin) {
                alert('Please TYPE Valid PIN')
                return;
            }
            //veryfy
            setLoading(true);
            veryfy({
                variables: {
                    token: pin,
                    kind: 'PHONE'
                }
            }).then(({
                data
            }) => {
                setLoading(false)
                console.log(data);
                if (data) {
                    props.navigation.navigate('Intro', {
                        token: token
                    });
                }
            }).catch((e) => {
                setLoading(false)
                console.log(e);
            })
        }

Answer 1

The below code is an example showing how you can use the Apollo middle-ware [1] and context [2] to add headers(auth) at runtime or testing. First we create a middle-ware block, then an inner context block.
In the context block we can use the line below to add external parameters, this is to configure the request

    const { isAuth, Authorization } = headers;

A boolean(Auth) can be set to allow a token to be embedded in a Authorization header, or an existing Authorization header can be passed in directly, this can be usefull for testing for example.

const getClient = () => {
// create link middleware see [1] 
    const authMiddleware = new ApolloLink((operation, forward) => {

    // code block below assumes there exists an auth token in globals
    // add headers with the client context [2]
    operation.setContext(({ headers = {} }) => {
      // auth header using global token as a bearer token
      const authHeaders = {
        Authorization: global.access_token
          ? `Bearer ${global.access_token}`
          : "",
      };
      // here an Authorization header can be passed in thru the context, 
      // which can be useful, eg for testing
      const { isAuth, Authorization } = headers;
      
      // if we have an Auth.. header we can just add that and return
      if (Authorization) {
        return {
          headers: { ...publicHeaders, ...{ Authorization } },
        };
      }
      const header = isAuth
        ? { ...publicHeaders, ...authHeaders }
        : publicHeaders;

      return {
        headers: header,
      };

    });

    return forward(operation);
    }); // end create middleware

    // create the graphql endpoint [1]
    const httpLink = new HttpLink({ uri: '/graphql' });

    // create client with the middleware and return the client
    // code block below assumes there exists a globalCache
    return new ApolloClient({
    cache: globalCache,
    link: concat(authMiddleware, httpLink),
      });
}

use

     // add/configure the appropriate headers in the context block
     // for the client
      client
      .mutate({
        mutation: <some mutation>,
        variables: <some variables>,
        context: {
          headers: {
            isAuth: false, // or true for authenticated operation
          },
        },
      })
      .then((result) => ....)
      .catch((err) => {
        console.log(....);
      }); 

use in a hook

   const [runMutation, { data }] =   
       useMutation(<gql>, {
        context: {
         headers: { isAuth: true },
         variables: <some vars>,
         onCompleted: (data) => callback(data),
         onError: (error) => console.error("Error ", error),
        },
      });

links
1 middleware
2 context