MoralisNextAuthProvider with NextAuth & Supabase

Moralis General
#1

I’m trying to use MoralisNextAuthProvider to authenticate with MetaMask Wallet inside my application
and to create a session that would get stored inside Supabase as well.

Anyone tried this before, because I’m facing some issues and I would like to discuss / do a brainstorming wiht someone. :slight_smile:

Thanks and looking forward for a reply!

#2

What have you tried so far and what issues/errors are you having?

#3

So, I am using tRPC for my app, that comes with Prisma and next-auth integration and I’m connecting to Supabase DB using Prisma.

Using Next-Auth together with MoralisNextAuthProvider, like this:

export const authOptions: NextAuthOptions = {
  providers: [MoralisNextAuthProvider()],
  callbacks: {
    async jwt({token, user}) {
      if (user) {
        token.user = user;
      }
      return token;
    },
    async session({session, token, user}) {
      if (session.user) {
        (session as { user: unknown }).user = token.user;
      }
      console.log('SESSION CALLED!!!', session);
      return session;
    },
  },
  session: {
    strategy: 'jwt'
  },
  adapter: PrismaAdapter(prisma),
};

export default NextAuth(authOptions);

and also wrapping the entire app in WagmiConfig, like this:

function MyApp({Component, pageProps}: AppProps) {
  return (
    <WagmiConfig client={client}>
      <SessionProvider session={pageProps.session}>
        <>
          <style jsx global>
            {`
              @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700;900&display=swap');
            `}
          </style>
          <Component {...pageProps} />
        </>
      </SessionProvider>
    </WagmiConfig>
  );
}

I’ve managed to successfully create a session when I am connecting with metamask and also store it as a cookie in the browser.

The last piece of the puzzle that I’m missing right now is storing the user in DB as an authenticated user. The entry is not created in the Supabase DB after having all the Prisma models that come with the boilerplate from the npm create t3-app@latest

Here are my Prisma models:

// Necessary for Next auth
model Account {
  id                String  @id @default(cuid())
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String? // @db.Text
  access_token      String? // @db.Text
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String? // @db.Text
  session_state     String?
  user              User    @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}

I’m not sure if someone tried this before, but everything still works the same as a simple Next.js application with Next-Auth. The “Prisma layer” that is making the connection with my Supabase DB is a nice challenge for me now. I just need to store the session and the User in DB everyime a new wallet address is connecting in the app.

With other providers it works automatically, but with the Moralis one I feel that I’m missing something.

My DB is still empty in the User after connecting with the wallet and storing the session as a cookie in the browser…

image
image2322×656 42.6 KB

#4

@pogadev18 Did you figure out how to get Supabase and Next Auth working together?

#5

Having the exact same issue. any luck?

#6

Hey @evro.eth,

Thanks for reaching out to us!

This looks an old so I am going to close this one and recommend you to create a new one instead. So we can cater to your issue more specifically.

Thanks!

1 Like
#7