Session Cookies not working in Safari and iOS

[rivaslive]

Steps:

• Create Keystone v6 App
• Configure session strategy

const session = statelessSessions({
  maxAge: sessionMaxAge,
  secret: sessionSecret!,
  secure: true,
  sameSite: 'none'
});

• Create new Next App and connected with apollo client

function createApolloClient() {
  const httpLink = createHttpLink({
    uri: `${serverUrl}/api/graphql`,
    credentials: 'include',
    fetchOptions: {
      mode: 'cors',
    },
    fetch: enchancedFetch
  });

  const linkUpload = createUploadLink({
    uri: `${serverUrl}/api/graphql`,
    credentials: 'include',
    fetchOptions: {
      mode: 'cors',
    },
    fetch: enchancedFetch,
    headers: {
      'Apollo-Require-Preflight': 'true'
    }
  }) as unknown as ApolloLink;

  return new ApolloClient({
    credentials: 'include',
    ssrMode: typeof window === 'undefined', // Ejecutar en servidor durante el SSR
    link:
      typeof window === 'undefined'
        ? ApolloLink.from([
            new SSRMultipartLink({
              stripDefer: true
            }),
            httpLink
          ])
        : linkUpload,
    cache: new InMemoryCache()
  });
}

• Try to login on another website that does not have the same domain

Set-Cookie does not work on Safari Mac OS or on iOS Chrome/Safari

Expected:

It is expected that you can use one login on different devices.

Desirable

I really wish I could set up a session based on a Token Bearer sent in the Authorization of the request, can I remove the use of Cookies in Keystonejs v6?

[ricardonogues]

@rivaslive Have you found out what was the problem? I'm experiencing the same issue.

[rivaslive]

@ricardonogues Yes, you only have to send in the Authorization header of the requests the Bearer ${token}

[ricardonogues]

@rivaslive Can you provide an example please?

[rivaslive]

@ricardonogues Yes,

**Login Function: **

const onLogin = () => {
    const { data } = await axios.post('LOGIN_PATH');
    const jwt = data?.authenticateUserWithPassword?.sessionToken || '';
    const userInfo = data?.authenticateUserWithPassword?.item || null;

    // save in storage preferencie, for example localstorage
    localStorage.setItem("auth-token", jwt);
    localStorage.setItem("auth-user", userInfo);

    return userInfo;
}

Axios config

import axios from 'axios';

export const instance = axios.create({
    baseURL: 'PATH'
});

function onRequest(config: InternalAxiosRequestConfig) {
    const token = localStorage.getItem('auth-token') || '';
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
}

instance.interceptors.request.use(onRequest);

Use in request REST

async function getToDo() {
    // Automatically the instance interceptor will insert the token for you in each request
    const { data } = await instance.get('/todo'); 
    
    return data;
}

[rivaslive]

@ricardonogues If you are using Graphql you must follow the following guide on Headers

https://www.apollographql.com/docs/react/networking/authentication/#header

[ricardonogues]

@rivaslive hmm I do not receive any sessionToken on the autenticateUserWithPassword response. Maybe I'm missing something in the backend? And yes I'm using graphQL.

[ricardonogues]

@rivaslive Please disregard my previous comment about not receiving the sessionToken. I was not querying it!

[ricardonogues]

@rivaslive Thank you for your help!