apollographql / apollographql/apollo-client-integrations

Authentification question

Open
#281 17 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
556
Forks
53
PR merge metrics
No merged PRs in 30d

Description

Hello! I have existing app react/apollo-graphql/next

I need to ensure login/logout functionality.

My server is on python/django/graphene stack.

I have mutations to login, and refresh the JWT token.

```
mutation emailSignIn($email: String!, $password: String!) {
emailSignIn(email: $email, password: $password) {
token
refreshToken
}
}
```

```
mutation refreshToken($refreshToken: String) {
refreshToken(refreshToken: $refreshToken) {
token
refreshToken
}
}
```

Previously, before SSR i stored got tokens in LocalStorage and then pass into headers of every request:

```
const ApiLink = new ApolloLink((operation, forward) => {
operation.setContext(({ headers = {} }) => ({
credentials: 'include',
headers: {
...headers,
authorization: TokenStorage.isAuthenticated()
? TokenStorage.getAuthenticationHeader()
: '',
},
}))
return forward(operation)
})
```

and refresh token in case of expiration error:

```
const errorLink = onError(({ graphQLErrors, operation, forward }) => {
if (graphQLErrors) {
const messages = graphQLErrors.map(({ message }) => message)
if (
messages.includes('Signature has expired') ||
messages.includes('Error decoding signature')
) {
return getNewTokenByRefreshToken(TokenStorage.getRefreshToken())
.filter(value => Boolean(value))
.flatMap(newToken => {
const oldHeaders = operation.getContext().headers
// eslint-disable-next-line @typescript-eslint/no-use-before-define
operation.setContext({
headers: {
...oldHeaders,
authorization: `JWT ${newToken}`,
},
})
return forward(operation)
})
}
}
})
```

But now I have no localStorage on my SSRed pages.
Could you please provide me with a way to manage it in a new way? I use App Router mode and my root layout is with 'use client' directive

Thanks in advance!

Contributor guide

No contributing guide indexed for this repository

Research direction

The issue names no repository file, test, or entry point to change. Start by reviewing the Next.js App Router integration and its existing SSR authentication guidance; done would require a clearly supported approach for managing and refreshing tokens without localStorage.

Written by the indexing model from the issue text.

Assessment

Tech stack
django, graphql, next.js, python, react, typescript
Domain
api, authentication, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.