Mengimplementasikan Auth terhadap aplikasi React dengan Apollo GraphQL

« Back to blog index

Ada banyak cara untuk mengimplementasikan autentikasi pada aplikasi yang dibangun menggunakan React.js dan GraphQL, kali ini saya akan mengajarkan kamu cara sederhananya!

Saya asumsikan kamu sudah familiar dengan React.js dan dasar-dasar GraphQL. Jika kamu belum pernah mencoba React.js+GraphQL sebelumnya, silakan mengacu ke dokumentasi official untuk belajar.

Setup

Server dependencies:

Client dependencies:

Server Part

Untuk dapat meng-autentikasi user, kamu perlu menambahkan key context pada instance ApolloServer, bisa dilihat pada contoh di bawah

const server = new ApolloServer({
  typeDefs,
  resolvers,
  context: ({ req }) => {
    // Mengambil token dari headers
    const token = req.headers.authorization || '';

    // TODO: Cek apakah token yang dikirim dari
    // client merupakan token yang valid

    // Menambahkan data `user` ke context yang
    // nantinya bisa kita akses lewat resolver
    // untuk melakukan proses otorisasi
    return { user };
  },
});

Untuk melakukan otorisasi di dalam resolver, kamu bisa tulis seperti ini:

todos: (parent, args, context) => {
  // Di sini kamu juga bisa mengirim error
  // dengan cara `throw new AuthenticationError('<ERROR_MESSAGE>')`
  if (!context.user) return null;

  return ['learn react', 'learn graphql'];
}

Client Part

Kita sudah menyiapkan server untuk menerima authorization headers dan melakukan pengecekan terhadap token. Lalu bagaimana cara kita mengirimkan token dari client? Kamu bisa tulis seperti ini:

const client = new ApolloClient({
  request: (operation) => {
    // Jika kamu develop menggunakan React Native,
    // kamu bisa menggunakan AsyncStorage
    // https://facebook.github.io/react-native/docs/asyncstorage
    const token = localStorage.getItem('token');
    operation.setContext({
      headers: {
        authorization: token ? `Bearer ${token}` : ''
      }
    });
  },
})

Itulah cara paling mudah (IMO) untuk mengimplementasikan auth pada aplikasi React.js+GraphQL kamu. Hope this helps, happy coding! ^^


« Back to blog index