diff --git a/.changeset/signin-signup-followups.md b/.changeset/signin-signup-followups.md
new file mode 100644
index 000000000..fc2ff1386
--- /dev/null
+++ b/.changeset/signin-signup-followups.md
@@ -0,0 +1,14 @@
+---
+'@asgardeo/react': patch
+'@asgardeo/nextjs': patch
+'@asgardeo/i18n': patch
+---
+
+Fixes for the embedded `` element.
+- When the identity server rejects the embedded sign-in because the redirect URI (`afterSignInUrl`) is not registered for the application, the form shows a translated, actionable message naming the URL to register (`errors.signin.redirect.uri.mismatch`) instead of the raw `invalid_callback - callback.not.match` text. The Next.js README documents the redirect URL requirements.
+- When the automatic sign-in after an embedded registration cannot be performed, the reason is reported in the browser console as well as the server log.
+- ``) to the identity server as the OAuth `redirect_uri`. A relative value such as `/dashboard` is
+resolved against your app's origin. Register the resolved URL, for example `http://localhost:3000/dashboard` and its
+production equivalent, under the application's **Authorized redirect URLs** in the console; the bare origin is not
+enough. If it is missing, the embedded `/accounts/register`
+
+A missing entry surfaces as Google's `Error 400: redirect_uri_mismatch`.
+
+`afterSignOutUrl` (default: the app origin) is sent as the post-logout redirect URI and must be registered as well.
+
## API Documentation
For complete API documentation including all components, hooks, and customization options, see the [Next.js SDK Documentation](https://wso2.com/asgardeo/docs/sdks/nextjs/overview).
diff --git a/packages/nextjs/src/client/components/presentation/SignUp/SignUp.tsx b/packages/nextjs/src/client/components/presentation/SignUp/SignUp.tsx
index 3da81aef4..6b7c8095d 100644
--- a/packages/nextjs/src/client/components/presentation/SignUp/SignUp.tsx
+++ b/packages/nextjs/src/client/components/presentation/SignUp/SignUp.tsx
@@ -69,6 +69,7 @@ const SignUp: FC = ({
variant = 'outlined',
afterSignUpUrl,
onError,
+ ...rest
}: SignUpProps) => {
const {signUp} = useAsgardeo();
@@ -110,6 +111,7 @@ const SignUp: FC = ({
return (
>
// After the Embedded flow is successful, the URL to navigate next is sent as `afterSignUpUrl` in the response.
if (result?.data?.afterSignUpUrl) {
- const {afterSignUpUrl, signedIn, ...flowResponse}: any = result.data;
+ const {afterSignUpUrl, autoSignInSkippedReason, signedIn, ...flowResponse}: any = result.data;
// A URL passed by the caller (e.g. the `afterSignUpUrl` prop of `>
if (signedIn) {
// A session cookie was set during sign-up; re-render server components so the signed-in state is picked up.
router.refresh();
+ } else if (autoSignInSkippedReason) {
+ // Make the fallback visible where developers look first, not only in the server log.
+ logger.warn(
+ `[AsgardeoClientProvider] The user was registered but not signed in automatically: ${autoSignInSkippedReason} ` +
+ 'They will have to sign in manually.',
+ );
}
// Hand the completed flow back to the caller (e.g. `): Sign
* submitted, through the app-native (embedded) sign-in flow. On success the session cookie is set exactly
* as for a regular sign-in.
*
- * Returns `false` (without throwing) whenever an automatic sign-in is not possible, for example when
- * app-native authentication is disabled for the application or the login flow needs more than a
- * username/password step. The caller should then fall back to sending the user to the sign-in page.
+ * Never throws: whenever an automatic sign-in is not possible, for example when app-native authentication
+ * is disabled for the application, the redirect URI is not registered, or the login flow needs more than a
+ * username/password step, the result carries `signedIn: false` and a `reason`. The caller should then fall
+ * back to sending the user to the sign-in page.
*/
-const autoSignInAfterSignUp = async ({username, password}: SignUpCredentials): Promise => {
+const autoSignInAfterSignUp = async ({username, password}: SignUpCredentials): Promise => {
try {
const initiation: Awaited> = await signInAction({
flowId: '',
@@ -77,13 +86,11 @@ const autoSignInAfterSignUp = async ({username, password}: SignUpCredentials): P
| undefined;
if (!initiation.success || !flow || !('nextStep' in flow)) {
- logger.warn(
- `[autoSignInAfterSignUp] Could not start the sign-in flow after registration, the user has to sign in manually. ${
- initiation.error ?? ''
- }`,
- );
+ const reason: string = `Could not start the sign-in flow after registration. ${initiation.error ?? ''}`.trim();
+
+ logger.warn(`[autoSignInAfterSignUp] ${reason} The user has to sign in manually.`);
- return false;
+ return {reason, signedIn: false};
}
const basicAuthenticator: EmbeddedSignInFlowAuthenticator | undefined = flow.nextStep?.authenticators?.find(
@@ -94,11 +101,11 @@ const autoSignInAfterSignUp = async ({username, password}: SignUpCredentials): P
);
if (!basicAuthenticator) {
- logger.warn(
- '[autoSignInAfterSignUp] The first login step has no username/password authenticator, the user has to sign in manually.',
- );
+ const reason: string = 'The first login step has no username/password authenticator.';
- return false;
+ logger.warn(`[autoSignInAfterSignUp] ${reason} The user has to sign in manually.`);
+
+ return {reason, signedIn: false};
}
const link: {href: string; method: string} | undefined = flow.links?.[0];
@@ -111,24 +118,22 @@ const autoSignInAfterSignUp = async ({username, password}: SignUpCredentials): P
);
if (completion.success && completion.data && 'afterSignInUrl' in completion.data) {
- return true;
+ return {signedIn: true};
}
- logger.warn(
- `[autoSignInAfterSignUp] Sign-in did not complete in a single step (status: ${
- (completion.data as {flowStatus?: string})?.flowStatus ?? 'unknown'
- }), the user has to sign in manually. ${completion.error ?? ''}`,
- );
+ const reason: string = `Sign-in did not complete in a single step (status: ${
+ (completion.data as {flowStatus?: string})?.flowStatus ?? 'unknown'
+ }). ${completion.error ?? ''}`.trim();
+
+ logger.warn(`[autoSignInAfterSignUp] ${reason} The user has to sign in manually.`);
- return false;
+ return {reason, signedIn: false};
} catch (error) {
- logger.warn(
- `[autoSignInAfterSignUp] Automatic sign-in failed, the user has to sign in manually: ${
- error instanceof Error ? error.message : String(error)
- }`,
- );
+ const reason: string = `Automatic sign-in failed: ${error instanceof Error ? error.message : String(error)}`;
+
+ logger.warn(`[autoSignInAfterSignUp] ${reason} The user has to sign in manually.`);
- return false;
+ return {reason, signedIn: false};
}
};
diff --git a/packages/react/src/components/adapters/FormContainer.tsx b/packages/react/src/components/adapters/FormContainer.tsx
index 83e068d4a..01238b46d 100644
--- a/packages/react/src/components/adapters/FormContainer.tsx
+++ b/packages/react/src/components/adapters/FormContainer.tsx
@@ -17,6 +17,7 @@
*/
import {FC, FormEvent} from 'react';
+import useTheme from '../../contexts/Theme/useTheme';
import {AdapterProps} from '../../models/adapters';
// eslint-disable-next-line import/no-cycle
import {createSignUpComponent} from '../presentation/auth/SignUp/v1/SignUpOptionFactory';
@@ -26,6 +27,7 @@ import {createSignUpComponent} from '../presentation/auth/SignUp/v1/SignUpOption
*/
const FormContainer: FC = (props: AdapterProps) => {
const {component} = props;
+ const {theme} = useTheme();
// If the form has child components, render them wrapped in a form element
if (component.components && component.components.length > 0) {
@@ -45,7 +47,12 @@ const FormContainer: FC = (props: AdapterProps) => {
};
return (
-