Custom UI Solution Not Found

[jamie-legg]

Hi there,

I've seen similar discussion posts, but none actually get to the meat of what I'm looking for.

I've gotten the example up and running, and integrated it successfully into a prototype app.

AuthUser.signOut() works a treat, from a component wrapped with withAuthUser(), in an authed context.

What is not clear to me, is what to do from an unauthed context. There is no documentation regarding login, either with providers or credentials, and the given example uses a very abstracted and somewhat plain UI solution.

I tried something like this:

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
...
                  const auth = getAuth();
                  signInWithEmailAndPassword(auth, email, password)
                    .then(async (userCredential) => {
                     

But i'm not sure where to go from here. I know that there is some interaction with the /api/login endpoint, and that a properly formulated request will trigger setAuthCookies(req, res) to take it from there, but it's not clear what that request should look like, aside from having an authorization header; and to that end, I haven't gotten that to work, getting errors along the lines of

  errorInfo: {
    code: 'auth/argument-error',
    message: '`uid` argument must be a non-empty string uid.'
  },

What am I doing wrong? :)

[kmjennison]

Hey @jamie-legg, what you're looking to do should be pretty easy. This library listens to the Firebase JS SDK for a login. It doesn't care how your login process works as long as the Firebase user is logged in (and Firebase's onIdTokenChanged is triggered). The login UI in the demo is just a handy shortcut but isn't required.

By default, this library automatically handles making the login API call after the user logs in.

For your app, a few things to check:

• Make sure you init next-firebase-auth and use withAuthUser on the login pages too, where the user will typically be unauthenticated. This will allow this library to respond to the login.
• Double check the user is successfully signed in via the Firebase JS SDK at the point you expect next-firebase-auth to treat the user as logged in.

I suggest building off the demo with your own signup flow to see where things break.

If you keep having problems, please share a reproduction here in case others can lend a hand.

[jamie-legg]

Thanks for the timely response @kmjennison, here is my progress so far.

I figured out that the library was listening to the FIrebase JS SDK, and that allowed me to implement

                  signInWithEmailAndPassword(auth, email, password).then
                  (() => {
                    window.location.href = '/';
                  } 

This works in practice, but I receive error messages from my console

Error: Problem getting a refresh token: {"error":{"code":400,"message":"INVALID_CUSTOM_TOKEN","errors":[{"message":"INVALID_CUSTOM_TOKEN","domain":"global","reason":"invalid"}]}}
    at /Users/jamielegg/xxx/node_modules/next-firebase-auth/build/index.node.js:2:22596
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/jamielegg/xxx/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
    at _next (/Users/jamielegg/xxx/node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

I have now ensured that both my index and my auth page have are wrapped such as

export default withAuthUser()(Auth);

I could try building from the demo, but I still expect to run into unknown territory. I'll update with progress here

[kmjennison]

Take a look at this:
https://github.com/gladly-team/next-firebase-auth#i-get-an-invalid_custom_token-error-when-trying-to-get-a-refresh-token

[jamie-legg]

Perfect. I had mistakenly noted down the client email. Thanks.

For reference, here is the important parts of my code I used to make this work.

import { useRouter } from "next/router";
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

                  const auth = getAuth();
                  signInWithEmailAndPassword(auth, email, password).then
                  (() => {
                    //redirect to home
                    router.push('/');
                  }).catch((error) => {
                    console.log(error);
                  });
            

This solution works as intended.