diff --git a/packages/gatsby-theme-store/src/index.ts b/packages/gatsby-theme-store/src/index.ts
index 3e94798aff..0eae493138 100644
--- a/packages/gatsby-theme-store/src/index.ts
+++ b/packages/gatsby-theme-store/src/index.ts
@@ -95,3 +95,9 @@ export type { Props as ProductSEOProps } from './components/Seo/product/ProductS
 
 export { useProductPixel as useProductPixelEffect } from './sdk/product/useProductPixel'
 export type { Options as ProductPixelOptions } from './sdk/product/useProductPixel'
+export { default as RenderExtensionLoader } from './sdk/RenderExtensionLoader'
+
+export { AUTH_PROVIDERS } from './components/Auth/Providers'
+export { useProviders } from './sdk/auth/useProviders'
+export { useOnLoginSuccessful } from './sdk/auth/useOnLoginSuccessful'
+export type { ProvidersResponse } from './sdk/auth/Service/getProviders'
diff --git a/packages/gatsby-theme-store/src/pages/account.tsx b/packages/gatsby-theme-store/src/pages/account.tsx
deleted file mode 100644
index 0513743c9d..0000000000
--- a/packages/gatsby-theme-store/src/pages/account.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { localizedPath, useIntl } from '@vtex/gatsby-plugin-i18n'
-import { Center, Container, Spinner, SuspenseSSR } from '@vtex/store-ui'
-import { navigate } from 'gatsby'
-import { GatsbySeo } from 'gatsby-plugin-next-seo'
-import React, { useEffect, useState } from 'react'
-import type { FC } from 'react'
-
-import Layout from '../components/Layout'
-import RenderExtensionLoader from '../sdk/RenderExtensionLoader'
-import { useProfile } from '../sdk/session/useProfile'
-
-const MY_ACCOUNT_PATH = '/account'
-const MY_ACCOUNT_DIV_NAME = 'my-account'
-const MY_ACCOUNT_EXTENSION_NAME = 'my-account-portal'
-const ONE_MIN_IN_MILLI = 60 * 100
-
-const render = async (locale: string) => {
-  const loader = new RenderExtensionLoader({
-    account: process.env.GATSBY_STORE_ID,
-    workspace: process.env.GATSBY_VTEX_IO_WORKSPACE,
-    verbose: process.env.NODE_ENV !== 'production',
-    publicEndpoint: undefined,
-    timeout: ONE_MIN_IN_MILLI,
-    path: MY_ACCOUNT_PATH,
-    locale,
-  })
-
-  const myAccountDiv = document.getElementById(MY_ACCOUNT_DIV_NAME)
-
-  if (window.__RENDER_7_RUNTIME__) {
-    loader.render(MY_ACCOUNT_EXTENSION_NAME, myAccountDiv, undefined)
-
-    return
-  }
-
-  await loader.load()
-
-  window.__RUNTIME__ = loader.render(
-    MY_ACCOUNT_EXTENSION_NAME,
-    myAccountDiv,
-    undefined
-  )
-}
-
-const Loading: FC = () => (
-  <Center height="750px">
-    <Spinner />
-  </Center>
-)
-
-const MyAccount: FC = () => {
-  const profile = useProfile({ stale: false })
-  const isAuthenticated = profile?.isAuthenticated?.value === 'true'
-  const [loading, setLoading] = useState(true)
-  const { locale, defaultLocale } = useIntl()
-
-  useEffect(() => {
-    const challengeAndRender = async () => {
-      try {
-        if (!isAuthenticated) {
-          const path = localizedPath(defaultLocale, locale, '/login')
-
-          navigate(path)
-
-          return
-        }
-
-        await render(locale)
-      } catch (err) {
-        console.error(err)
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    challengeAndRender()
-  }, [defaultLocale, isAuthenticated, locale])
-
-  if (!isAuthenticated) {
-    return null
-  }
-
-  return (
-    <>
-      <div id={MY_ACCOUNT_DIV_NAME} />
-      {loading && <Loading />}
-    </>
-  )
-}
-
-const Page: FC = () => (
-  <>
-    <GatsbySeo noindex nofollow />
-
-    <Layout>
-      <Container>
-        <SuspenseSSR fallback={<Loading />}>
-          <MyAccount />
-        </SuspenseSSR>
-      </Container>
-    </Layout>
-  </>
-)
-
-export default Page
diff --git a/packages/gatsby-theme-store/src/pages/login.tsx b/packages/gatsby-theme-store/src/pages/login.tsx
deleted file mode 100644
index 4bed7586ec..0000000000
--- a/packages/gatsby-theme-store/src/pages/login.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { useIntl } from '@vtex/gatsby-plugin-i18n'
-import { Box, Center, Flex, Spinner, SuspenseSSR } from '@vtex/store-ui'
-import { GatsbySeo } from 'gatsby-plugin-next-seo'
-import React, { useEffect, useState } from 'react'
-import type { FC } from 'react'
-import type { PageProps } from 'gatsby'
-
-import { AUTH_PROVIDERS } from '../components/Auth/Providers'
-import Layout from '../components/Layout'
-import { useOnLoginSuccessful } from '../sdk/auth/useOnLoginSuccessful'
-import { useProviders } from '../sdk/auth/useProviders'
-import { useProfile } from '../sdk/session/useProfile'
-import type { ProvidersResponse } from '../sdk/auth/Service/getProviders'
-
-type Props = PageProps<unknown>
-type DefaultProvidersComponents = typeof AUTH_PROVIDERS
-type ProviderName = keyof typeof AUTH_PROVIDERS
-
-const filterProviders = (
-  providersComponents: DefaultProvidersComponents,
-  storeProviders?: ProvidersResponse
-) => {
-  if (!storeProviders) {
-    return [{ name: '', ...providersComponents.NoState }]
-  }
-
-  const hasLogin = storeProviders.passwordAuthentication
-  const hasAccessCode = storeProviders.accessKeyAuthentication
-  const hasSingleProvider = storeProviders.oAuthProviders.length === 1
-
-  if (!hasLogin && !hasAccessCode && hasSingleProvider) {
-    return [
-      {
-        name: storeProviders.oAuthProviders[0].providerName,
-        ...providersComponents.CustomProvider,
-      },
-    ]
-  }
-
-  const providers = []
-
-  if (hasLogin) {
-    providers.push({
-      name: 'EmailAndPassword',
-      ...providersComponents.EmailAndPassword,
-    })
-  }
-
-  if (hasAccessCode) {
-    providers.push({
-      name: 'EmailVerification',
-      ...providersComponents.EmailVerification,
-    })
-  }
-
-  storeProviders.oAuthProviders.forEach(({ providerName }) => {
-    const provider = providersComponents[providerName as ProviderName]
-
-    if (provider) {
-      providers.push({ name: providerName, ...provider })
-    }
-  })
-
-  return providers
-}
-
-const Page: FC = () => {
-  const onLoginSuccessful = useOnLoginSuccessful()
-  const { formatMessage } = useIntl()
-  const { data: storeProviders } = useProviders()
-  const profile = useProfile({ stale: false })
-
-  const filteredProviders = filterProviders(AUTH_PROVIDERS, storeProviders)
-
-  const [focusProvider, setFocusProvider] = useState(0)
-
-  const { Component } = filteredProviders[focusProvider]
-
-  const isAuthenticated = profile?.isAuthenticated?.value === 'true'
-
-  useEffect(() => {
-    if (isAuthenticated) {
-      onLoginSuccessful('/account')
-    }
-  }, [isAuthenticated, onLoginSuccessful])
-
-  if (isAuthenticated) {
-    return (
-      <Center height="200px">
-        <Spinner />
-      </Center>
-    )
-  }
-
-  return (
-    <Flex variant="login.page.container">
-      <Box variant="login.page.group">
-        <Box variant="login.page.group.title">
-          {formatMessage({
-            id: 'login.page.title',
-          })}
-        </Box>
-
-        {filteredProviders.map(({ Button: ButtonComponent }, i) =>
-          i !== focusProvider ? (
-            <ButtonComponent
-              key={i}
-              variant="login.page"
-              onClick={() => setFocusProvider(i)}
-            />
-          ) : null
-        )}
-      </Box>
-
-      <Box variant="login.page.group">
-        <SuspenseSSR
-          fallback={
-            <Center height="200px">
-              <Spinner />
-            </Center>
-          }
-        >
-          <Component
-            variant="page"
-            providerName={filteredProviders[focusProvider].name}
-          />
-        </SuspenseSSR>
-      </Box>
-    </Flex>
-  )
-}
-
-// We split into two components to avoid re-rendering the <Layout/> when
-// selecting Auth method
-const PageWithLayout: FC<Props> = () => (
-  <>
-    <GatsbySeo noindex nofollow />
-
-    <Layout>
-      <SuspenseSSR
-        fallback={
-          <Center height="300px">
-            <Spinner />
-          </Center>
-        }
-      >
-        <Page />
-      </SuspenseSSR>
-    </Layout>
-  </>
-)
-
-export default PageWithLayout