Skip to content

Commit

Permalink
🐛 Fix Redirect uri bug in magic-link for contributors
Browse files Browse the repository at this point in the history
:wq
  • Loading branch information
naelob committed Jul 25, 2024
1 parent b9abb36 commit 317d3d2
Show file tree
Hide file tree
Showing 8 changed files with 30 additions and 18 deletions.
12 changes: 6 additions & 6 deletions apps/magic-link/src/hooks/useOAuth.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@ type UseOAuthProps = {
returnUrl: string; // Return URL after OAuth flow
projectId: string; // Project ID
linkedUserId: string; // Linked User ID
optionalApiUrl?: string; // URL of the User's Server
redirectIngressUri: string | null; // URL of the User's Server
onSuccess: () => void;
};

const useOAuth = ({ providerName, vertical, returnUrl, projectId, linkedUserId, onSuccess }: UseOAuthProps) => {
const useOAuth = ({ providerName, vertical, returnUrl, projectId, linkedUserId, redirectIngressUri, onSuccess }: UseOAuthProps) => {
const [isReady, setIsReady] = useState(false);
const intervalRef = useRef<number | ReturnType<typeof setInterval> | null>(null);
const authWindowRef = useRef<Window | null>(null);
const authWindowRef = useRef<Window | null>(null);

useEffect(() => {
// Perform any setup logic here
Expand All @@ -41,12 +41,12 @@ const useOAuth = ({ providerName, vertical, returnUrl, projectId, linkedUserId,
}
};


const openModal = async (onWindowClose: () => void) => {
const apiUrl = config.API_URL!;
const authUrl = await constructAuthUrl({
projectId, linkedUserId, providerName, returnUrl, apiUrl, vertical
projectId, linkedUserId, providerName, returnUrl, apiUrl , vertical, rediectUriIngress: redirectIngressUri
});
console.log('auth url is '+ authUrl)

if (!authUrl) {
throw new Error("Auth Url is Invalid " + authUrl);
Expand All @@ -56,7 +56,7 @@ const useOAuth = ({ providerName, vertical, returnUrl, projectId, linkedUserId,
const left = (window.innerWidth - width) / 2;
const top = (window.innerHeight - height) / 2;
const authWindow = window.open(authUrl as string, '_blank', `width=${width},height=${height},top=${top},left=${left}`);
authWindowRef.current = authWindow;
authWindowRef.current = authWindow;

clearExistingInterval(false);

Expand Down
11 changes: 10 additions & 1 deletion apps/magic-link/src/lib/ProviderModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const ProviderModal = () => {
const [openSuccessDialog,setOpenSuccessDialog] = useState<boolean>(false);
const [currentProviderLogoURL,setCurrentProviderLogoURL] = useState<string>('')
const [currentProvider,setCurrentProvider] = useState<string>('')

const [redirectIngressUri, setRedirectIngressUri] = useState<string | null>(null);
const {mutate : createApiKeyConnection} = useCreateApiKeyConnection();
const {data: magicLink} = useUniqueMagicLink(uniqueMagicLinkId);
const {data: connectorsForProject} = useProjectConnectors(isProjectIdReady ? projectId : null);
Expand All @@ -86,6 +86,14 @@ const ProviderModal = () => {
}
}, []);

useEffect(() => {
const queryParams = new URLSearchParams(window.location.search);
const redirectIngressUri = queryParams.get('redirectIngressUri');
if (redirectIngressUri) {
setRedirectIngressUri(redirectIngressUri);
}
}, []);

useEffect(() => {
if (magicLink) {
setProjectId(magicLink?.id_project);
Expand Down Expand Up @@ -118,6 +126,7 @@ const ProviderModal = () => {
returnUrl: window.location.href,
projectId: projectId,
linkedUserId: magicLink?.id_linked_user as string,
redirectIngressUri,
onSuccess: () => {
console.log('OAuth successful');
setOpenSuccessDialog(true);
Expand Down
5 changes: 3 additions & 2 deletions apps/webapp/src/components/Connection/ConnectionTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,8 @@ export default function ConnectionTable() {
connectionToken: connection.connection_token!
}))


const INGRESS_REDIRECT = config.DISTRIBUTION == 'selfhost' && config.REDIRECT_WEBHOOK_INGRESS;

return (
<>
<div className="hidden h-full flex-1 flex-col space-y-8 md:flex">
Expand Down Expand Up @@ -114,7 +115,7 @@ export default function ConnectionTable() {
</div>
</div>
<DialogFooter>
<Button variant="outline" size="sm" className="h-7 gap-1" type="submit" onClick={() => window.open(`${config.MAGIC_LINK_DOMAIN}/?uniqueLink=${uniqueLink}`, '_blank')}>
<Button variant="outline" size="sm" className="h-7 gap-1" type="submit" onClick={() => window.open(`${config.MAGIC_LINK_DOMAIN}/?uniqueLink=${uniqueLink}&redirectIngressUri=${INGRESS_REDIRECT}`, '_blank')}>
<p className="mr-2">Open Link</p>
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
</Button>
Expand Down
5 changes: 3 additions & 2 deletions apps/webapp/src/components/Connection/CopyLinkInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@ const CopyLinkInput = () => {
const [copied, setCopied] = useState(false);

const {uniqueLink} = useMagicLinkStore();
const INGRESS_REDIRECT = config.DISTRIBUTION == 'selfhost' && config.REDIRECT_WEBHOOK_INGRESS;

const handleCopy = async () => {
try {
await navigator.clipboard.writeText(`${config.MAGIC_LINK_DOMAIN}/?uniqueLink=${uniqueLink}`);
await navigator.clipboard.writeText(`${config.MAGIC_LINK_DOMAIN}/?uniqueLink=${uniqueLink}&redirectIngressUri=${INGRESS_REDIRECT}`);
toast.success("Magic link copied", {
action: {
label: "Close",
Expand All @@ -34,7 +35,7 @@ const CopyLinkInput = () => {
{uniqueLink !== 'https://' ?
<>
<Input
defaultValue={`${config.MAGIC_LINK_DOMAIN}/?uniqueLink=${uniqueLink}`}
defaultValue={`${config.MAGIC_LINK_DOMAIN}/?uniqueLink=${uniqueLink}&redirectIngressUri=${INGRESS_REDIRECT}`}
readOnly
className="col-span-3 flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
/>
Expand Down
1 change: 1 addition & 0 deletions apps/webapp/src/lib/config.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
const config = {
API_URL: process.env.NEXT_PUBLIC_BACKEND_DOMAIN,
MAGIC_LINK_DOMAIN: process.env.NEXT_PUBLIC_MAGIC_LINK_DOMAIN,
REDIRECT_WEBHOOK_INGRESS: process.env.NEXT_PUBLIC_REDIRECT_WEBHOOK_INGRESS,
POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST,
POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
DISTRIBUTION: process.env.NEXT_PUBLIC_DISTRIBUTION,
Expand Down
1 change: 1 addition & 0 deletions docker-compose.dev.yml
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,7 @@ services:
NEXT_PUBLIC_BACKEND_DOMAIN: ${NEXT_PUBLIC_BACKEND_DOMAIN}
NEXT_PUBLIC_MAGIC_LINK_DOMAIN: ${NEXT_PUBLIC_MAGIC_LINK_DOMAIN}
NEXT_PUBLIC_WEBAPP_DOMAIN: ${NEXT_PUBLIC_WEBAPP_DOMAIN}
NEXT_PUBLIC_REDIRECT_WEBHOOK_INGRESS: ${REDIRECT_TUNNEL_INGRESS}
restart: unless-stopped
ports:
- 80:8090
Expand Down
1 change: 1 addition & 0 deletions docker-compose.source.yml
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,7 @@ services:
NEXT_PUBLIC_BACKEND_DOMAIN: ${NEXT_PUBLIC_BACKEND_DOMAIN}
NEXT_PUBLIC_FRONTEND_DOMAIN: ${NEXT_PUBLIC_FRONTEND_DOMAIN}
NEXT_PUBLIC_WEBAPP_DOMAIN: ${NEXT_PUBLIC_WEBAPP_DOMAIN}
NEXT_PUBLIC_REDIRECT_WEBHOOK_INGRESS: ${REDIRECT_TUNNEL_INGRESS}
restart: unless-stopped
ports:
- 80:8090
Expand Down
12 changes: 5 additions & 7 deletions packages/shared/src/authUrl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,13 @@ interface AuthParams {
returnUrl: string;
apiUrl: string;
vertical: string;
redirectUrlIngressWhenLocalDev?: string;
rediectUriIngress?: string | null;
}

// make sure to check wether its api_key or oauth2 to build the right auth
// make sure to check if client has own credentials to connect or panora managed ones
export const constructAuthUrl = async ({ projectId, linkedUserId, providerName, returnUrl, apiUrl, vertical }: AuthParams) => {
const redirectUrlIngressWhenLocalDev = CONNECTORS_METADATA[vertical][providerName].options?.local_redirect_uri_in_https === true && 'https://prepared-wildcat-infinitely.ngrok-free.app';
const localEnv = apiUrl.startsWith('http://localhost:3000') || apiUrl.includes('localhost');
const encodedRedirectUrl = encodeURIComponent(`${localEnv && redirectUrlIngressWhenLocalDev ? redirectUrlIngressWhenLocalDev : apiUrl}/connections/oauth/callback`);
export const constructAuthUrl = async ({ projectId, linkedUserId, providerName, returnUrl, apiUrl, vertical, rediectUriIngress }: AuthParams) => {
const encodedRedirectUrl = encodeURIComponent(`${rediectUriIngress ? rediectUriIngress : apiUrl}/connections/oauth/callback`);
const state = encodeURIComponent(JSON.stringify({ projectId, linkedUserId, providerName, vertical, returnUrl }));
// console.log('State : ', JSON.stringify({ projectId, linkedUserId, providerName, vertical, returnUrl }));
// console.log('encodedRedirect URL : ', encodedRedirectUrl);
Expand Down Expand Up @@ -72,10 +70,10 @@ const handleOAuth2Url = async (input: HandleOAuth2Url) => {
config,
encodedRedirectUrl,
state,
apiUrl
apiUrl,
} = input;

const type = providerToType(providerName, vertical, authStrategy);
const type = providerToType(providerName, vertical, authStrategy);

// 1. env if selfhost and no custom
// 2. backend if custom credentials
Expand Down

0 comments on commit 317d3d2

Please sign in to comment.