authentication - NextJs/ Apollo Client/ NextAuth 発行でヘッダーに Authorization Bearer Token を正しく設定

Question

apollo クライアントを使用して、認証された gql リクエストのために、Cookie からヘッダーに jwt トークンを正しく設定できません。

問題は、_app.js で App コンポーネントをラップする withApollo.js ファイルにあると思います。このファイルの形式は、wes bos の高度な react nextjs graphql コースに基づいています。nextauth が JWT を Cookie として保存すると、カスタム正規表現関数を使用してその Cookie から JWT を取得できます。次に、このトークン値を認証ベアラーヘッダーに設定しようとします。問題は、jwt トークンを必要とする gql クエリを含むページの最初の読み込み時に、「未定義のプロパティ 'Cookie' を読み取れません」というエラーが表示されることです。しかし、ブラウザの更新を押すと、突然機能し、トークンがヘッダーに正常に設定されました。

いくつかの調査により、setcontext リンクを追加することになったので、ここでこの操作を実行しようとしました。トークン値の設定を async await しようとしましたが、それは役に立たなかったようです。リフレッシュするまでヘッダーを設定したくないようです。

lib/withData.js

import { ApolloClient, ApolloLink, InMemoryCache } from '@apollo/client';
import { onError } from '@apollo/link-error';
import { getDataFromTree } from '@apollo/react-ssr';
import { createUploadLink } from 'apollo-upload-client';
import withApollo from 'next-with-apollo';
import { setContext } from 'apollo-link-context';
import { endpoint, prodEndpoint } from '../config';
import paginationField from './paginationField';

const getCookieValue = (name, cookie) =>
  cookie.match(`(^|;)\\s*${name}\\s*=\\s*([^;]+)`)?.pop() || '';
let token;

function createClient(props) {
  const { initialState, headers, ctx } = props;
  console.log({ headers });
  // console.log({ ctx });
  return new ApolloClient({
    link: ApolloLink.from([
      onError(({ graphQLErrors, networkError }) => {
        if (graphQLErrors)
          graphQLErrors.forEach(({ message, locations, path }) =>
            console.log(
              `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
            )
          );
        if (networkError)
          console.log(
            `[Network error]: ${networkError}. Backend is unreachable. Is it running?`
          );
      }),
      setContext(async (request, previousContext) => {
        token = await getCookieValue('token', headers.cookie);
        return {
          headers: {
            authorization: token ? `Bearer ${token}` : '',
          },
        };
      }),
      createUploadLink({
        uri: process.env.NODE_ENV === 'development' ? endpoint : prodEndpoint,
        fetchOptions: {
          credentials: 'include',
        },
        headers,
      }),
    ]),
    cache: new InMemoryCache({
      typePolicies: {
        Query: {
          fields: {
            // TODO: We will add this together!
            // allProducts: paginationField(),
          },
        },
      },
    }).restore(initialState || {}),
  });
}

export default withApollo(createClient, { getDataFromTree });

page/_app.js

import { ApolloProvider } from '@apollo/client';
import NProgress from 'nprogress';
import Router from 'next/router';
import { Provider, getSession } from 'next-auth/client';
import { CookiesProvider } from 'react-cookie';
import nookies, { parseCookies } from 'nookies';
import Page from '../components/Page';
import '../components/styles/nprogress.css';
import withData from '../lib/withData';

Router.events.on('routeChangeStart', () => NProgress.start());
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());

function MyApp({ Component, pageProps, apollo, user }) {
  return (
    <Provider session={pageProps.session}>
      <ApolloProvider client={apollo}>
        <Page>
          <Component {...pageProps} {...user} />
        </Page>
      </ApolloProvider>
    </Provider>
  );
}

MyApp.getInitialProps = async function ({ Component, ctx }) {
  let pageProps = {};
  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps(ctx);
  }
  pageProps.query = ctx.query;

  const user = {};

  const { req } = ctx;
  const session = await getSession({ req });

  if (session) {
    user.email = session.user.email;
    user.id = session.user.id;
    user.isUser = !!session;

    // Set
    nookies.set(ctx, 'token', session.accessToken, {
      maxAge: 30 * 24 * 60 * 60,
      path: '/',
    });
  }

  return {
    pageProps,
    user: user || null,
  };
};

export default withData(MyApp);

api/auth/[...nextAuth.js]

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
import axios from 'axios';

const providers = [
  Providers.Google({
    clientId: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
  }),
  Providers.Credentials({
    name: 'Credentials',
    credentials: {
      username: { label: 'Username', type: 'text', placeholder: 'jsmith' },
      password: { label: 'Password', type: 'password' },
    },
    authorize: async (credentials) => {
      const user = await axios
        .post('http://localhost:1337/auth/local', {
          identifier: credentials.username,
          password: credentials.password,
        })
        .then((res) => {
          res.data.user.token = res.data.jwt;
          return res.data.user;
        }) // define user as res.data.user (will be referenced in callbacks)
        .catch((error) => {
          console.log('An error occurred:', error);
        });
      if (user) {
        return user;
      }
      return null;
    },
  }),
];

const callbacks = {
  // Getting the JWT token from API response
  async jwt(token, user, account, profile, isNewUser) {
    // WRITE TO TOKEN (from above sources)
    if (user) {
      const provider = account.provider || user.provider || null;
      let response;
      let data;
      switch (provider) {
        case 'google':
          response = await fetch(
            `${process.env.NEXT_PUBLIC_API_URL}/auth/google/callback?access_token=${account?.accessToken}`
          );
          data = await response.json();
          if (data) {
            token.accessToken = data.jwt;
            token.id = data.user._id;
          } else {
            console.log('ERROR No data');
          }
          break;

        case 'local':
          response = await fetch(
            `${process.env.NEXT_PUBLIC_API_URL}/auth/local/callback?access_token=${account?.accessToken}`
          );
          data = await response.json();
          token.accessToken = user.token;
          token.id = user.id;
          break;

        default:
          console.log(`ERROR: Provider value is ${provider}`);
          break;
      }
    }

    return token;
  },

  async session(session, token) {
    // WRITE TO SESSION (from token)
    // console.log(token);

    session.accessToken = token.accessToken;
    session.user.id = token.id;

    return session;
  },
  redirect: async (url, baseUrl) => baseUrl,
};

const sessionPreferences = {
  session: {
    jwt: true,
  },
};

const options = {
  providers,
  callbacks,
  sessionPreferences,
};

export default (req, res) => NextAuth(req, res, options);

authentication - NextJs/ Apollo Client/ NextAuth 発行でヘッダーに Authorization Bearer Token を正しく設定

0 に答える 0

Related

Reference