feat(login): init form signin + signup

src/app/(auth)/layout.tsx

@@ -0,0 +1,45 @@
+import { ClerkProvider } from '@clerk/nextjs';
+import { setRequestLocale } from 'next-intl/server';
+
+export default async function AuthLayout(props: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await props.params;
+  setRequestLocale(locale);
+  let signInUrl = '/sign-in';
+  let signUpUrl = '/sign-up';
+  let dashboardUrl = '/dashboard';
+  let afterSignOutUrl = '/';
+
+  signInUrl = `/${signInUrl}`;
+  signUpUrl = `/${signUpUrl}`;
+  dashboardUrl = `/`;
+  afterSignOutUrl = `/${afterSignOutUrl}`;
+
+  return (
+    <ClerkProvider
+      localization={{
+        signIn: {
+          start: {
+            title: 'Sign In',
+          },
+        },
+        signUp: {
+          start: {
+            title: 'Sign Up',
+          },
+        },
+      }}
+      signInUrl={signInUrl}
+      signUpUrl={signUpUrl}
+      signInFallbackRedirectUrl={dashboardUrl}
+      signUpFallbackRedirectUrl={dashboardUrl}
+      afterSignOutUrl={afterSignOutUrl}
+    >
+      <div className="mx-auto flex w-full items-center justify-center pt-32">
+        {props.children}
+      </div>
+    </ClerkProvider>
+  );
+}

src/app/(auth)/sign-in/page.tsx

@@ -0,0 +1,14 @@
+import { SignIn } from '@clerk/nextjs';
+
+type ISignInPageProps = {
+  params: Promise<{ locale: string }>;
+};
+
+export default async function SignInPage(_props: ISignInPageProps) {
+  return (
+    <SignIn
+      path="/sign-in"
+      signUpUrl="/sign-up"
+    />
+  );
+};

src/app/(auth)/sign-up/page.tsx

@@ -0,0 +1,14 @@
+import { SignUp } from '@clerk/nextjs';
+
+type ISignUpPageProps = {
+  params: Promise<{ locale: string }>;
+};
+
+export default async function SignUpPage(_props: ISignUpPageProps) {
+  return (
+    <SignUp
+      path="/sign-up"
+      signInUrl="/sign-in"
+    />
+  );
+};

src/utils/AppConfig.ts

@@ -5,7 +5,7 @@ const localePrefix: LocalePrefixMode = 'as-needed';
 // FIXME: Update this configuration file based on your project information
 export const AppConfig = {
   name: 'Nextjs Starter',
-  locales: ['en', 'fr'],
+  locales: ['en', 'fr', 'vi'],
   defaultLocale: 'en',
   localePrefix,
 };