Firebase auth with cutome credentials provider

[alibidjand]

Question 💬

could you plz guide me to find the best way of implement the authentication on my project with next-auth and firebase authentication ?

How to reproduce ☕️

just wanna have my custom credential provider which authenticate the entered username and password with Firebase Authentication on sign in page

import NextAuth from "next-auth"
import { getDatabase } from "firebase/database"
import { DB } from "../../../constants/firebase"
import { FirebaseAdapter } from "@next-auth/firebase-adapter"
import * as firestoreFunctions from "firebase/firestore"
import CredentialsProvider from "next-auth/providers/credentials"

export default NextAuth({
	session: {
		strategy: "database",
	},
	providers: [
		CredentialsProvider({
			name: "credentials",
			credentials: {
				username: {
					label: "Username",
					type: "text",
					placeholder: "[email protected]",
				},
				password: { label: "Password", type: "password" },
			},
			async authorize(credentials, req) {
				const database = getDatabase()
				console.log(database)

				const user = {
					id: 1,
					usename: "j",
					password: "123456789",
				}
				if (
					credentials?.username === user.usename &&
					credentials.password === "123456789"
				) {
					return user
				}
				return null
			},
		}),
	],
	adapter: FirebaseAdapter({
		db: DB,
		...firestoreFunctions,
	}),
	// pages: {
	// 	signIn: "/auth/signin",
	// 	signOut: "/auth/signout",
	// 	error: "/auth/error", // Error code passed in query string as ?error=
	// 	verifyRequest: "/auth/verify-request", // (used for check email message)
	// 	newUser: "/auth/new-user", // New users will be directed here on first sign in (leave the property out if not of interest)
	// },
	callbacks: {
		async jwt({ token, user }) {
			if (user) {
				token.email = user.email
			}
			return token
		},
		async session({ session, token, user }) {
			if (token) {
				session.user!.email = token.email
			}
			return session
		},
		redirect({ url, baseUrl }) {
			if (url.startsWith(baseUrl)) return url
			else if (url.startsWith("/"))
				return new URL(url, baseUrl).toString()
			return baseUrl
		},
	},
})

as you see

const user = {
					id: 1,
					usename: "j",
					password: "123456789",
				} 

in fact except of these static data wanna search and get right user info from the Firebase
there are 2 other ways of doing this but just wanna try to do it with next-auth at first.
as I couldn't anywhere something useful about it hope you could help me

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[DiegoGonzalezCruz]

Hi @alibidjandy , how did you manage to solve this?
I'm facing a similar issue.

[malawllaqi]

any news about it ? i'm facing the same problem atm :(

[elhe26]

Hi @alibidjandy , did you manage to solve this?

[adammo94]

If you'd like to use default firebase password authenitcation then maybe you should refer to this: https://firebase.google.com/docs/auth/web/password-auth?hl=en&authuser=0

In my case it looks like this:

providers: [
    ...My other providers...,
    Credentials({
      name: 'Credentials',
      credentials: {
        username: {
          label: 'Username',
          type: 'text',
          placeholder: '[email protected]'
        },
        password: {
          label: 'Password',
          type: 'password'
        }
      },
      async authorize(credentials) {
        signInWithEmailAndPassword(auth, credentials?.username || '', credentials?.password || '')
          .then(userCredential => userCredential.user)
          .catch(error => null)
      }
    })
  ],

while I have auth inside firebase.ts file:

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore } from 'firebase/firestore'
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
  measurementId: process.env.FIRABSEE_MEASUREMENT_ID
};

export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app)

[itsmefarhan]

@adammo94 can you share the full example?

[ryanwoconnor]

Agreed can you share your source?

[adammo94]

@ryanwoconnor , @itsmefarhan made a simple example repo, you can check it out here: https://github.com/adammo94/examples-firebase-with-next-auth

[patrykczubek]

Hey, would you be able to hookup Google login but through Firebase using that example?

[patrykczubek]

Is there a way of actually achieving this while using next with with Firebase adapter?

[ajnart]

I'm curious about this too

[patrykczubek]

I switched to a different library completely. Next-firebase-auth