title: Next-Auth with firebase Authentication
body: <p>just wanna have my custom credential provider which authenticate the entered username and password with Firebase Authentication on sign in page</p>
  <p>pages/api/auth/[...nextauth].ts</p>
  <pre><code>    import NextAuth from &quot;next-auth&quot;
  import { getDatabase } from &quot;firebase/database&quot;
  import { DB } from &quot;../../../constants/firebase&quot;
  import { FirebaseAdapter } from &quot;@next-auth/firebase-adapter&quot;
  import * as firestoreFunctions from &quot;firebase/firestore&quot;
  import CredentialsProvider from &quot;next-auth/providers/credentials&quot;
  
  export default NextAuth({
      session: {
          strategy: &quot;database&quot;,
      },
      providers: [
          CredentialsProvider({
              name: &quot;credentials&quot;,
              credentials: {
                  username: {
                      label: &quot;Username&quot;,
                      type: &quot;text&quot;,
                      placeholder: &quot;somebody@gmail.com&quot;,
                  },
                  password: { label: &quot;Password&quot;, type: &quot;password&quot; },
              },
              async authorize(credentials, req) {
                  const database = getDatabase()
                  console.log(database)
  
                  const user = {
                      id: 1,
                      usename: &quot;j&quot;,
                      password: &quot;123456789&quot;,
                  }
                  if (
                      credentials?.username === user.usename &amp;&amp;
                      credentials.password === &quot;123456789&quot;
                  ) {
                      return user
                  }
                  return null
              },
          }),
      ],
      adapter: FirebaseAdapter({
          db: DB,
          ...firestoreFunctions,
      }),
      // pages: {
      //  signIn: &quot;/auth/signin&quot;,
      //  signOut: &quot;/auth/signout&quot;,
      //  error: &quot;/auth/error&quot;, // Error code passed in query string as ?error=
      //  verifyRequest: &quot;/auth/verify-request&quot;, // (used for check email message)
      //  newUser: &quot;/auth/new-user&quot;, // 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(&quot;/&quot;))
                  return new URL(url, baseUrl).toString()
              return baseUrl
          },
      },
  })
  </code></pre>
  <p>firebase.ts</p>
  <pre><code>import { initializeApp, getApp, getApps } from &quot;firebase/app&quot;
  import { getAnalytics } from &quot;firebase/analytics&quot;
  import { getFirestore } from &quot;@firebase/firestore&quot;
  import { getStorage } from &quot;@firebase/storage&quot;
  import getFirebaseObject from &quot;./firebaseConfig&quot;
  
  const app = !getApps.length ? initializeApp(getFirebaseObject()) : getApp()
  const DB = getFirestore(app)
  const storages = getStorage()
  const analytics = getAnalytics(app)
  
  export { app, DB, analytics, storages }
  </code></pre>
  <p>as you see</p>
  <pre><code>const user = {
                  id: 1,
                  usename: &quot;j&quot;,
                  password: &quot;123456789&quot;,
              } 
  </code></pre>
  <p>in fact except of these static data wanna search and get right user info from the Firebase
  I know there are a some other way of doing this but I like working with next-auth for last change wanna make sure there's a spot of light in this was ;)</p>