https://supertokens.com/ logo
Join Discord
Powered by
Hello, I'm trying to implement third party recipe ...
# support-questions-legacy
s
Hello, I'm trying to implement third party recipe but this code:
Copy code
typescript
// _app.tsx
if (typeof window !== 'undefined') {
    Auth.init()
}

export default function App(props: AppProps) {
    const { Component, pageProps } = props

    React.useEffect(() => {}, [])

    return (
        <>
            <Head>
                <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width' />
            </Head>

            <BaseLayout>
                <Component {...pageProps} />
            </BaseLayout>
        </>
    )
}
Copy code
typescript
// BaseLayout.tsx
export const BaseLayout = ({ children }: React.PropsWithChildren<unknown>) => (
    <MantineProvider withGlobalStyles withNormalizeCSS theme={theme}>
        <NavigationProgress />
        <Auth.Provider>
            <ModalsProvider>
                <ClientProvider>{children}</ClientProvider>
            </ModalsProvider>
        </Auth.Provider>
    </MantineProvider>
)
Copy code
typescript
// auth/index.tsx
import { AuthProvider } from './AuthProvider'
import { init } from './init'

export const Auth = {
    init,
    Provider: AuthProvider,
}

export * from './provider'
Copy code
typescript
// AuthProvider.tsx
export const AuthProvider = (props: React.PropsWithChildren<{}>) => (
    <SuperTokensWrapper>{props.children}</SuperTokensWrapper>
)
Copy code
typescript
// init.tsx
import SuperTokensReact from 'supertokens-auth-react'
import { frontendConfig } from './config/frontendConfig'

export const init = () => SuperTokensReact.init(frontendConfig())
Copy code
typescript
// frontendConfig.ts
import Router from 'next/router'
import SessionReact from 'supertokens-auth-react/recipe/session'
import ThirdPartyReact from 'supertokens-auth-react/recipe/thirdparty'
import { appInfo } from './appInfo'

export const frontendConfig = () => {
    console.debug('Supertokens init!')
    console.debug(appInfo, ThirdPartyReact.Google.init())
    return {
        appInfo,
        recipeList: [
            ThirdPartyReact.init({
                signInAndUpFeature: {
                    providers: [ThirdPartyReact.Google.init()],
                },
            }),
            SessionReact.init(),
        ],
        windowHandler: (oI: any) => {
            return {
                ...oI,
                location: {
                    ...oI.location,
                    setHref: (href: string) => {
                        Router.push(href)
                    },
                },
            }
        },
    }
}
And this code:
Copy code
typescript
export async function signInWithGoogle(authorisationURL: string) {
    try {
        const authUrl = await getAuthorisationURLWithQueryParamsAndSetState({ // <-- THIS LINE
            providerId: 'google',

            // This is where Google should redirect the user back after login or error.
            // This URL goes on the Google's dashboard as well.
            // authorisationURL: "http://localhost:3000/auth/callback/google",
            authorisationURL,
        })

        // we redirect the user to google for auth.
        window.location.assign(authUrl)
    } catch (err: any) {
        if (err.isSuperTokensGeneralError === true) {
            // this may be a custom error message sent from the API by you.
            throw new Error(err.message)
        } else {
            throw err
        }
    }
}
Produces this error:
Copy code
Error: No instance of ThirdParty found. Make sure to call the ThirdParty.init method.
How and why frontendConfig is called, config is valid (printed to console), appInfo is valid and backend is online (Nest.js + supertokens docker)
r
hey @SomeBody16
you need to make sure that you call the init function before calling the 
getAuthorisationURLWithQueryParamsAndSetState
function - is that happening for sure?
s
Copy code
typescript
// signInWithGoogle.tsx
export async function signInWithGoogle(authorisationURL: string) {
    try {
        console.log('signInWithGoogle')
        const authUrl = await getAuthorisationURLWithQueryParamsAndSetState({
            providerId: 'google',
            authorisationURL,
        })
        window.location.assign(authUrl)
    } catch (err: any) {
        if (err.isSuperTokensGeneralError === true) {
            throw new Error(err.message)
        } else {
            throw err
        }
    }
}

// frontendConfig.tsx
export const frontendConfig = () => {
    console.debug('Supertokens init!')
    return {
        appInfo,
        recipeList: [
            ThirdPartyReact.init({
                signInAndUpFeature: {
                    providers: [ThirdPartyReact.Google.init()],
                },
            }),
            SessionReact.init(),
        ],
        windowHandler: (oI: any) => {
            return {
                ...oI,
                location: {
                    ...oI.location,
                    setHref: (href: string) => {
                        Router.push(href)
                    },
                },
            }
        },
    }
}

// init.tsx
export const init = () => {
    console.log('Init!')
    SuperTokensReact.init(frontendConfig())
}
It is happening for sure
r
How are you importing the getAuthorisationURLWithQueryParamAndSetState?
s
Copy code
typescript
import { getAuthorisationURLWithQueryParamsAndSetState } from 'supertokens-web-js/recipe/thirdparty'
r
Right. You want to import it from supertokens-auth-react instead of web-js
s
: o
it works! Thank you ❤️
PreviousNext
Powered by