Redirecting to a custom signup page

ferrjohnpainagan commented 1 year ago

Checklist

[X] The issue can be reproduced in the auth0-react sample app (or N/A).
[X] I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
[X] I have looked into the API documentation and have not found a suitable solution or answer.
[X] I have searched the issues and have not found a suitable solution or answer.
[X] I have searched the Auth0 Community forums and have not found a suitable solution or answer.
[X] I agree to the terms within the Auth0 Code of Conduct.

Description

i have nextjs app that has auth0-react installed

this is how i structured my _app file

import type { AppProps } from 'next/app';
import '../styles/globals.css';
import { WagmiConfig } from 'wagmi';
import { config } from '../connectors';
import { dmSans } from '../constants/fonts';
import NavBar from '../components/navbar';
import { ChakraProvider } from '@chakra-ui/react';
import { TwineUserProvider } from '../context/UserProvider';
import { Auth0Provider } from '@auth0/auth0-react';
import { Providers } from '../redux/providers';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { getTitleFromPathname } from '../utils';

const TwineInterface = ({ Component, pageProps }: AppProps) => {
  const origin = typeof window !== 'undefined' ? window.location.origin : '';
  const [title, setTitle] = useState('');
  const router = useRouter();

  useEffect(() => {
    setTitle(getTitleFromPathname(router.pathname));
  }, [router.pathname]);

  return (
    <Providers>
      <WagmiConfig config={config}>
        <Auth0Provider
          domain={process.env.NEXT_PUBLIC_AUTH0_ISSUER_BASE_URL as string}
          clientId={process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID as string}
          authorizationParams={{
            redirect_uri: `${origin}/callback`,
          }}
        >
          <TwineUserProvider>
            <ChakraProvider>
              <Head>
                <title>Twine | {title}</title>
              </Head>
              <main className={`${dmSans.className} text-white`}>
                <NavBar />
                <Component {...pageProps} />
              </main>
            </ChakraProvider>
          </TwineUserProvider>
        </Auth0Provider>
      </WagmiConfig>
    </Providers>
  );
};

export default TwineInterface;

i have a custom login/signup experience so this code below doesnt work. it will only redirect me to the login page.

onClick={() =>
                    loginWithRedirect({
                      authorizationParams: {
                        screen_hint: 'signup',
                      },
                    })
                  }

what i want is to be able to redirect to the custom signup page i created using auth0-react

Reproduction

Setup nextjs app
add auth0 react
create custom login experience in auth0
call loginWithRedirect

Additional context

No response

auth0-react version

"@auth0/auth0-react": "^2.2.1",

React version

"next": "^13.4.2", "react": "18.2.0",

Which browsers have you tested in?

Other

frederikprijck commented 1 year ago

Based on your comment in the other issue, did it work before with using V1 of the SDK? If it did, what code did u use ?

If not, can you help me understand what needs to be done in order to get the user to the signup page, would it include sending a custom parameter to auth0?

ferrjohnpainagan commented 1 year ago

nope i wasnt able to try using the v1 of the sdk.

what i want is to redirect me to the SIGNUP page of my custom auth0 signup(not LOGIN). it doesnt include sending a custom parameter

frederikprijck commented 1 year ago

it doesnt include sending a custom parameter

It should always include something to send from the application to Auth0 which is typically done using custom parameters, would this FAQ help you achieve what you want? It explains it both when using the new and classic experience.

As you can see, in that case they are using a custom parameter called action with a value of signup. Note that for v2 of our SDK, this would become

loginWithRedirect({ authorizationParams: { action: 'signup' }});

So what is happening when using the classic experience is:

You send a custom param from your application to auth0 through our SDK (in this case it's called action)
On the custom login page, you read the param and set the correct value for initialScreen when instantiating lock to either signUp or login.

When using the new experience, all you need to do is call:

loginWithRedirect({ authorizationParams: { screen_hint: 'signup' }});

ferrjohnpainagan commented 1 year ago

got it! i was able to pass the custom params and handled it properly on the custom login page!

thanks @frederikprijck !

auth0 / auth0-react