everything okey in local but I'm not sure how can I replica my env (RP_ID)

[GroophyLifefor]

In my project I setup everything and works really well, but then I deployed so I have to change my localhost to my url so I do this

export const rpId = process.env.RP_ID || "localhost";
export const origin = process.env.ORIGIN || "http://localhost:3000";

then my part of env file was

RP_ID=remotecms.vercel.app
ORIGIN=https://remotecms.vercel.app/

and I also tried dev.remotecms.vercel.app

when I tried RP_ID=dev.remotecms.vercel.app

when I tried RP_ID=remotecms.vercel.app

[wparad]

Seems like you have a bug in your service:

You are getting back a 500, what do your logs say?

[GroophyLifefor]

Good question, Nextjs or react whatever, doesn't tell me any error and vercel logs too clean

[wparad]

Well nothing anyone else can do to help without that information. Somewhere the validation code contains the wrong value, but you'll need to narrow down where. You can try to deploy less code, but researching to use vercel here to help in going to be your challenge.

[GroophyLifefor]

Okey lemme look code,

in my index page, has an form and form has an submit function

/src/app/page.tsx

import styles from './page.module.css';
import AuthProviderWithForm from './AuthProvider';

export default function Home() {
  return (
    <main className={styles.main}>
      <AuthProviderWithForm style={styles.formContainer}>
        ...inputs...

        <input type="submit" value="Submit" className={styles.submitButton} />
      </AuthProviderWithForm>
    </main>
  );
}

/src/app/AuthProvider.tsx

import {
  startAuthentication,
  startRegistration,
} from '@simplewebauthn/browser';
import {
  generateWebAuthnLoginOptions,
  generateWebAuthnRegistrationOptions,
  verifyWebAuthnLogin,
  verifyWebAuthnRegistration,
} from '@/app/lib/webauthn';

export default function AuthProviderWithForm({style, children}:{ style: any, children: React.ReactNode}) {

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
  
    const formData = new FormData(event.currentTarget);
    const email = formData.get('email')?.toString();
    const type = formData.get('type')?.toString();
  
    if (!email) {
      return;
    }
  
    if (type === 'register') {
      console.log('Registering user', email);
      const response = await generateWebAuthnRegistrationOptions(email);
  
      if (!response.success || !response.data) {
        alert(response.message ?? 'Something went wrong!');
        return;
      }
  
      const localResponse = await startRegistration(response.data);
      const verifyResponse = await verifyWebAuthnRegistration(localResponse);
  
      if (!verifyResponse.success) {
        console.log(
          'Registration failed',
          verifyResponse.message ?? 'Something went wrong!'
        );
        alert(verifyResponse.message ?? 'Something went wrong!');
        return;
      }
  
      console.log('Registration successful', response, verifyResponse);
      alert('Registration successful!');
    } else {
      console.log('Logging in user', email);
      const response = await generateWebAuthnLoginOptions(email);
  
      if (!response.success || !response.data) {
        console.log('Login failed', response.message ?? 'Something went wrong!');
        alert(response.message ?? 'Something went wrong!');
        return;
      }
  
      const localResponse = await startAuthentication(response.data);
      const verifyResponse = await verifyWebAuthnLogin(localResponse);
  
      if (!verifyResponse.success) {
        console.log(
          'Login failed',
          verifyResponse.message ?? 'Something went wrong!'
        );
        alert(verifyResponse.message ?? 'Something went wrong!');
        return;
      }
  
      console.log('Login successful', response, verifyResponse);
      alert('Login successful!');
    }
  };
  

  return (
    <form onSubmit={handleSubmit} className={style}>
      {children}
    </form>
  );
}

---

• when i enter the site it says something like navigated i don't know why it might be caused by webauthn.
  

• I am trying to register with [email protected] e-mail address.
  Function will called but throwing
  

• mine constants are

export const rpId =
  process.env.NODE_ENV === 'development'
    ? 'localhost'
    : process.env.RP_ID || 'localhost';
    
export const origin =
  process.env.NODE_ENV === 'development'
    ? 'http://localhost:3000'
    : process.env.ORIGIN || 'http://localhost:3000';

and in deployment,
rpId was "remotecms.vercel.app/"
origin was "https://remotecms.vercel.app/"

Is it supposed to be a special endpoint or how should I do it, the document doesn't really say that and I'm stuck.

[wparad]

the origin and rpId should not end in a /, that's the problem. Remove that and you will be good.

[GroophyLifefor]

It's worked right now, thanks you so much <3