Kimlik Doğrulama

Uygulamanıza kimlik doğrulamalı erişim sağlama

İsteğe bağlı olarak, kullanıcıların bağlantı süreci sırasında cüzdanlarıyla bir mesaj imzalamasını şart koşabilirsiniz, böylece bağlı hesabın sahibi olduklarını kanıtlarlar ve uygulamanıza ayrıcalıklı erişimi olan bir kimlik doğrulamalı kullanıcı oturumu oluşturabilirsiniz.

Özel back-end'lerle ve mesaj formatlarıyla entegrasyon yapmak mümkün olsa da, RainbowKit öncelikli olarak Ethereum ile Giriş Yapma ve NextAuth için destek sağlar.

Ethereum ve NextAuth ile Giriş Yapmayı Ayarlayın

Install

@rainbow-me/rainbowkit-siwe-next-auth paketini ve NextAuth v5'i kurun.

npm install @rainbow-me/rainbowkit-siwe-next-auth [email protected]

Mevcut bir NextAuth v4 SIWE entegrasyonunu yükseltiyorsanız, NextAuth v5 geçiş rehberi'ni takip edin.

NextAuth kurulumu yapın.

v5 Credentials sağlayıcısını kullanan ve auth yardımcısını dışa aktaran bir NextAuth yapılandırması oluşturun. authorize uygulamanızın, kimlik doğrulanan adresi döndürmeden önce SIWE mesajını, imzayı, alanı ve nonce'u doğrulaması gerekir.

import NextAuth from 'next-auth';
import type { NextAuthConfig } from 'next-auth';
import Credentials from 'next-auth/providers/credentials';

export const authOptions: NextAuthConfig = {
  providers: [
    Credentials({
      name: 'Ethereum',
      credentials: {
        message: { label: 'Message', type: 'text' },
        signature: { label: 'Signature', type: 'text' },
      },
      async authorize(credentials) {
        const siweMessage = await validateSiweCredentials(credentials);

        if (!siweMessage) {
          return null;
        }

        return {
          id: siweMessage.address,
        };
      },
    }),
  ],
  secret: process.env.AUTH_SECRET ?? process.env.NEXTAUTH_SECRET,
  session: {
    strategy: 'jwt',
  },
};

export const { handlers, auth, signIn, signOut } = NextAuth(authOptions);

SIWE doğrulaması, nonce kontrolleri ve sunucu tarafı doğrulama için tam with-next-siwe-next-auth örneğine bakın.

Sağlayıcıyı kurun

App bileşeninizde, RainbowKitSiweNextAuthProvider'ı içe aktarın.

import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';

RainbowKitProvider'ı RainbowKitSiweNextAuthProvider ile sarmalayın, böylece oturuma erişimi olduğundan emin olun.

import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { SessionProvider } from 'next-auth/react';
import type { Session } from 'next-auth';
import { AppProps } from 'next/app';
import { WagmiProvider } from 'wagmi';
import {
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query';

const queryClient = new QueryClient();

export default function App({
  Component,
  pageProps,
}: AppProps<{
  session: Session;
}>) {
  return (
    <WagmiProvider {...etc}>
      <SessionProvider refetchInterval={0} session={pageProps.session}>
        <QueryClientProvider client={queryClient}>
          <RainbowKitSiweNextAuthProvider>
            <RainbowKitProvider {...etc}>
              <Component {...pageProps} />
            </RainbowKitProvider>
          </RainbowKitSiweNextAuthProvider>
        </QueryClientProvider>
      </SessionProvider>
    </WagmiProvider>
  );
}

RainbowKitSiweNextAuthProvider yerinde olduğunda, kullanıcılarınız cüzdanlarını bağladıktan sonra bir mesaj imzalamak için kimlik doğrulama istemi alacaklardır.

SIWE mesaj seçeneklerini özelleştirin

SIWE mesaj seçeneklerini RainbowKitSiweNextAuthProvider üzerindeki getSiweMessageOptions özelliğine bir fonksiyon geçirerek özelleştirebilirsiniz.

Bu fonksiyon her yeni mesaj oluşturulduğunda çağrılacaktır. Bu fonksiyondan dönen seçenekler varsayılanlarla birleştirilecektir.

import {
  RainbowKitSiweNextAuthProvider,
  GetSiweMessageOptions,
} from '@rainbow-me/rainbowkit-siwe-next-auth';

const getSiweMessageOptions: GetSiweMessageOptions = () => ({
  statement: 'Sign in to my RainbowKit app',
});

<RainbowKitSiweNextAuthProvider
  getSiweMessageOptions={getSiweMessageOptions}
>
  ...
</RainbowKitSiweNextAuthProvider>;

Oturumu sunucu tarafında erişin

Oturuma, auth yapılandırmanızdan dışa aktarılan auth fonksiyonu ile erişebilirsiniz. Kullanıcı başarılı bir şekilde kimlik doğruladıysa, oturumun address özelliği kullanıcının adresi olacaktır.

Ayrıca çözümlenmiş oturum nesnesini sunucudan getServerSideProps vasıtasıyla iletip NextAuth'ın bunu istemci üzerinde tekrar çözümlemesi gerekmemesini sağlayabilirsiniz.

Örneğin:

import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { auth } from '../auth';

export const getServerSideProps: GetServerSideProps = async context => {
  const session = await auth(context.req, context.res);

  const address = session?.address ?? null;
  // If you have a value for "address" here, your
  // server knows the user is authenticated.

  // You can then pass any data you want
  // to the page component here.
  return {
    props: {
      address,
      session,
    },
  };
};

type AuthenticatedPageProps = InferGetServerSidePropsType<
  typeof getServerSideProps
>;

export default function AuthenticatedPage({
  address,
}: AuthenticatedPageProps) {
  return address ? (
    <h1>Authenticated as {address}</h1>
  ) : (
    <h1>Unauthenticated</h1>
  );
}

Oturumu yönetmek hakkında daha fazla bilgi için aşağıdaki belgelere başvurabilirsiniz:

Genel Bakış

Başlarken

Gelişmiş