Notion Ask to Login after tapping Back button #237

jevanjovandy · 2023-07-08T02:52:48Z

Notion asking to Login after Back button tapped.
I think this comes from Notion changing 'www.notion.so' to 'yoursite.notion.site'.
Anyone already have a solution to this problem? Thanks before.

JustSleightly · 2023-07-08T20:43:12Z

+1
I have also started noticing this more recently within the last week on my own notion

eeshabarua · 2023-07-10T13:55:22Z

+1
I'm having the same issue.

JackyGohSG · 2023-07-11T09:45:44Z

+1

smugfox · 2023-07-13T12:17:45Z

+1

DudeThatsErin · 2023-07-14T04:47:47Z

+1

melihcelenk · 2023-07-20T19:31:15Z

+1

jruers · 2023-07-21T06:25:34Z

+1

gojomo · 2023-07-21T18:43:15Z

Notably, when checking sites in the Fruition-users 'Showcase' https://stephenou.notion.site/92053970e5084019ac096d2df7e7f440?v=2bed11f9a95d41f59e8af11a7746c339, even if the page content is displaying, it's coming back as an HTTP 404 error (prompting some browsers to display an extra error-banner), and navigating forward to subpages works, but backing-up lands on the Notion sign-up page.

eeshabarua · 2023-07-24T18:21:08Z

I resolved the issue!! Please try and see if this resolves it for you.

Chrome Dev Tools Console was displaying the following error messages:

[GSI_LOGGER]: The given origin is not allowed for the given client ID
"Uncaught TypeError: Cannot read properties of undefined (reading 'ThemeStore')”
A soft navigation has been detected: https://eeshabarua.me/

To Solve:
Modify the Cloudflare Worker worker.js code to handle the redirection and serving of Notion pages based on slugs. The worker should receive incoming requests and serve the appropriate content based on the slug-to-page mapping without relying on client-side JavaScript for redirection.

Update fetchAndApply() to correctly handle the soft navigation (see code below):

The new block detects if the user is trying to access a Notion page using a slug, and if so, it redirects the user to the corresponding Notion page instead of client-side JavaScript (which is a Notion endpoint and therefore would have needed reauthentication.)

Update domain name in the Worker file (as solved in Mismatch between origin and baseUrl (dev). 06.07.2023 #236 )
Clear cached browsing data to avoid the origin and BaseURL Mismatch error (as solved in Mismatch between origin and baseUrl (dev). #122)

async function fetchAndApply(request) {
  if (request.method === 'OPTIONS') {
    return handleOptions(request);
  }
  let url = new URL(request.url);
  url.hostname = 'eeshabarua.notion.site';
  if (url.pathname === '/robots.txt') {
    return new Response('Sitemap: https://' + MY_DOMAIN + '/sitemap.xml');
  }
  if (url.pathname === '/sitemap.xml') {
    let response = new Response(generateSitemap());
    response.headers.set('content-type', 'application/xml');
    return response;
  }
  let response;
  if (url.pathname.startsWith('/app') && url.pathname.endsWith('js')) {
    response = await fetch(url.toString());
    let body = await response.text();
    response = new Response(body.replace(/eeshabarua.notion.site/g, MY_DOMAIN).replace(/notion.so/g, MY_DOMAIN), response);
    response.headers.set('Content-Type', 'application/x-javascript');
    return response;
  } else if ((url.pathname.startsWith('/api'))) {
    // Forward API
    response = await fetch(url.toString(), {
      body: url.pathname.startsWith('/api/v3/getPublicPageData') ? null : request.body,
      headers: {
        'content-type': 'application/json;charset=UTF-8',
        'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36'
      },
      method: 'POST',
    });
    response = new Response(response.body, response);
    response.headers.set('Access-Control-Allow-Origin', '*');
    return response;
  } else {
    const currentSlug = url.pathname.slice(1);
    const pageId = SLUG_TO_PAGE[currentSlug];

    if (pageId) {
      const notionUrl = `https://eeshabarua.notion.site/${pageId.replace(/-/g, '')}`;
      return Response.redirect(notionUrl, 301);
    }

    response = await fetch(url.toString(), {
      body: request.body,
      headers: request.headers,
      method: request.method,
    });
    response = new Response(response.body, response);
    response.headers.delete('Content-Security-Policy');
    response.headers.delete('X-Content-Security-Policy');

    // Soft navigation handling
    if (slugs.indexOf(currentSlug) > -1) {
      const destinationPageId = SLUG_TO_PAGE[currentSlug];
      if (destinationPageId) {
        const notionUrl = `https://eeshabarua.notion.site/${destinationPageId.replace(/-/g, '')}`;
        const { pathname, search, hash } = new URL(notionUrl);
        const redirectUrl = `${MY_DOMAIN}/${currentSlug}${search}${hash}`;
        response.headers.set('Content-Type', 'text/html');
        response.headers.set('Cache-Control', 'no-store');
        response.headers.set('Location', redirectUrl);
        response.status = 302;
        return response;
      }
    }

    return appendJavascript(response, SLUG_TO_PAGE);
  }
}

jruers · 2023-07-24T19:00:48Z

hi @eeshabarua , do not get to work it. Replaced the part with yours and of course changed eeshabarua.... But not working.

eeshabarua · 2023-07-24T19:01:54Z

@jruers Hmm... can you describe the behavior? Is the back button still prompting reauth?

jruers · 2023-07-24T19:04:18Z

Maybe I replace something wrong, but the notion site is not found after I adjusted the worker...

eeshabarua · 2023-07-24T19:18:58Z

I apologize, the code block I provided still had notion.so URL instead of yoursite.notion.site. It is now edited to reflect those changes.

Here is my full worker.js if for debugging purposes.

// CONFIGURATION STARTS HERE

// Step 1: enter your domain name like fruitionsite.com
const MY_DOMAIN = 'eeshabarua.me';

/*
 * Step 2: enter your URL slug to page ID mapping
 * The key on the left is the slug (without the slash)
 * The value on the right is the Notion page ID
 */
const SLUG_TO_PAGE = {
  '': '506b6a6b6ac94378ba32764d4b09f27a',
};

// CONFIGURATION ENDS HERE

const PAGE_TO_SLUG = {};
const slugs = [];
const pages = [];
Object.keys(SLUG_TO_PAGE).forEach(slug => {
  const page = SLUG_TO_PAGE[slug];
  slugs.push(slug);
  pages.push(page);
  PAGE_TO_SLUG[page] = slug;
});

addEventListener('fetch', event => {
  event.respondWith(fetchAndApply(event.request));
});

function generateSitemap() {
  let sitemap = '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">';
  slugs.forEach(
    (slug) =>
    (sitemap +=
      '<url><loc>https://' + MY_DOMAIN + '/' + slug + '</loc></url>')
  );
  sitemap += '</urlset>';
  return sitemap;
}

const corsHeaders = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET, HEAD, POST, PUT, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type',
};

function handleOptions(request) {
  if (request.headers.get('Origin') !== null &&
    request.headers.get('Access-Control-Request-Method') !== null &&
    request.headers.get('Access-Control-Request-Headers') !== null) {
    // Handle CORS pre-flight request.
    return new Response(null, {
      headers: corsHeaders
    });
  } else {
    // Handle standard OPTIONS request.
    return new Response(null, {
      headers: {
        'Allow': 'GET, HEAD, POST, PUT, OPTIONS',
      }
    });
  }
}

async function fetchAndApply(request) {
  if (request.method === 'OPTIONS') {
    return handleOptions(request);
  }
  let url = new URL(request.url);
  url.hostname = 'eeshabarua.notion.site';
  if (url.pathname === '/robots.txt') {
    return new Response('Sitemap: https://' + MY_DOMAIN + '/sitemap.xml');
  }
  if (url.pathname === '/sitemap.xml') {
    let response = new Response(generateSitemap());
    response.headers.set('content-type', 'application/xml');
    return response;
  }
  let response;
  if (url.pathname.startsWith('/app') && url.pathname.endsWith('js')) {
    response = await fetch(url.toString());
    let body = await response.text();
    response = new Response(body.replace(/eeshabarua.notion.site/g, MY_DOMAIN).replace(/notion.so/g, MY_DOMAIN), response);
    response.headers.set('Content-Type', 'application/x-javascript');
    return response;
  } else if ((url.pathname.startsWith('/api'))) {
    // Forward API
    response = await fetch(url.toString(), {
      body: url.pathname.startsWith('/api/v3/getPublicPageData') ? null : request.body,
      headers: {
        'content-type': 'application/json;charset=UTF-8',
        'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36'
      },
      method: 'POST',
    });
    response = new Response(response.body, response);
    response.headers.set('Access-Control-Allow-Origin', '*');
    return response;
  } else {
    const currentSlug = url.pathname.slice(1);
    const pageId = SLUG_TO_PAGE[currentSlug];

    if (pageId) {
      const notionUrl = `https://eeshabarua.notion.site/${pageId.replace(/-/g, '')}`;
      return Response.redirect(notionUrl, 301);
    }

    response = await fetch(url.toString(), {
      body: request.body,
      headers: request.headers,
      method: request.method,
    });
    response = new Response(response.body, response);
    response.headers.delete('Content-Security-Policy');
    response.headers.delete('X-Content-Security-Policy');

    // Soft navigation handling
    if (slugs.indexOf(currentSlug) > -1) {
      const destinationPageId = SLUG_TO_PAGE[currentSlug];
      if (destinationPageId) {
        const notionUrl = `https://eeshabarua.notion.site/${destinationPageId.replace(/-/g, '')}`;
        const { pathname, search, hash } = new URL(notionUrl);
        const redirectUrl = `${MY_DOMAIN}/${currentSlug}${search}${hash}`;
        response.headers.set('Content-Type', 'text/html');
        response.headers.set('Cache-Control', 'no-store');
        response.headers.set('Location', redirectUrl);
        response.status = 302;
        return response;
      }
    }

    return appendJavascript(response, SLUG_TO_PAGE);
  }
}


class MetaRewriter {
  element(element) {
    // Modify meta tags for SEO if needed
  }
}

class HeadRewriter {
  element(element) {
    // Modify head content if needed, e.g., adding custom styles, scripts, or fonts
  }
}

class BodyRewriter {
  constructor(SLUG_TO_PAGE) {
    this.SLUG_TO_PAGE = SLUG_TO_PAGE;
  }

  element(element) {
    // Modify body content if needed
  }
}

async function appendJavascript(res, SLUG_TO_PAGE) {
  return new HTMLRewriter()
    .on('title', new MetaRewriter())
    .on('meta', new MetaRewriter())
    .on('head', new HeadRewriter())
    .on('body', new BodyRewriter(SLUG_TO_PAGE))
    .transform(res);
}

jruers · 2023-07-24T20:10:10Z

@eeshabarua tried your worker... still prompting reauth

JustSleightly · 2023-07-25T04:34:16Z

After implementing this fix for another issue for fruition, my issue here seems to also have resolved itself.

bryange3 · 2023-07-26T01:25:13Z

Worked for me, thanks Eesha!

bflack · 2023-07-26T20:42:27Z

Dark/light fix also worked for me. The earlier one forwarded to my actual notion URL instead of my vanity URL so no-go there.

olimpa · 2023-07-28T00:59:54Z

@gojomo @jevanjovandy Currently the source code is outdated, it will have to be updated, I have a functional one that I will publish soon. (maybe in the pull or in this section) the errors are as mentioned ca Domain changes, script, cloudflare worker .

angadsri · 2023-08-12T20:19:33Z

I resolved the issue!! Please try and see if this resolves it for you.

Thanks for sharing your fix, @eeshabarua! It did sort out the problem for me, though it seems that when I change the code it also messes up my 'pretty' URLs, which start displaying as *****.notion.site

After implementing this fix for another issue for fruition, my issue here seems to also have resolved itself.

It's so lucky you tried this fix already, @JustSleightly, thanks for sharing! This dark/light mode code change actually somehow did fix the back-login problem for me too.

Appreciate this community!

mbochynski · 2023-08-28T13:17:54Z

@olimpa Any update on your update? :D The dark/light fix worked for me, but I don't like the reloading part.

EDIT: I've just tested the dark/light solution without window.location.reload(); line and it works perfectly fine to me. 🤔

DudeThatsErin · 2023-09-01T13:28:40Z

@jruers Hmm... can you describe the behavior? Is the back button still prompting reauth?

I was using the previous code wrong but it isn't working.

  // CONFIGURATION STARTS HERE

// Step 1: enter your domain name like fruitionsite.com
const MY_DOMAIN = 'codinghelp.site';

/*
 * Step 2: enter your URL slug to page ID mapping
 * The key on the left is the slug (without the slash)
 * The value on the right is the Notion page ID
 */
const SLUG_TO_PAGE = {
  '': '4c97396d18034520bf450b7d7485a4c4?pvs=4',
};

// CONFIGURATION ENDS HERE

const PAGE_TO_SLUG = {};
const slugs = [];
const pages = [];
Object.keys(SLUG_TO_PAGE).forEach(slug => {
  const page = SLUG_TO_PAGE[slug];
  slugs.push(slug);
  pages.push(page);
  PAGE_TO_SLUG[page] = slug;
});

addEventListener('fetch', event => {
  event.respondWith(fetchAndApply(event.request));
});

function generateSitemap() {
  let sitemap = '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">';
  slugs.forEach(
    (slug) =>
    (sitemap +=
      '<url><loc>https://' + MY_DOMAIN + '/' + slug + '</loc></url>')
  );
  sitemap += '</urlset>';
  return sitemap;
}

const corsHeaders = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET, HEAD, POST, PUT, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type',
};

function handleOptions(request) {
  if (request.headers.get('Origin') !== null &&
    request.headers.get('Access-Control-Request-Method') !== null &&
    request.headers.get('Access-Control-Request-Headers') !== null) {
    // Handle CORS pre-flight request.
    return new Response(null, {
      headers: corsHeaders
    });
  } else {
    // Handle standard OPTIONS request.
    return new Response(null, {
      headers: {
        'Allow': 'GET, HEAD, POST, PUT, OPTIONS',
      }
    });
  }
}

async function fetchAndApply(request) {
  if (request.method === 'OPTIONS') {
    return handleOptions(request);
  }
  let url = new URL(request.url);
  url.hostname = 'dudethatserin.notion.site';
  if (url.pathname === '/robots.txt') {
    return new Response('Sitemap: https://' + MY_DOMAIN + '/sitemap.xml');
  }
  if (url.pathname === '/sitemap.xml') {
    let response = new Response(generateSitemap());
    response.headers.set('content-type', 'application/xml');
    return response;
  }
  let response;
  if (url.pathname.startsWith('/app') && url.pathname.endsWith('js')) {
    response = await fetch(url.toString());
    let body = await response.text();
    response = new Response(body.replace(/dudethatserin.notion.site/g, MY_DOMAIN).replace(/notion.so/g, MY_DOMAIN), response);
    response.headers.set('Content-Type', 'application/x-javascript');
    return response;
  } else if ((url.pathname.startsWith('/api'))) {
    // Forward API
    response = await fetch(url.toString(), {
      body: url.pathname.startsWith('/api/v3/getPublicPageData') ? null : request.body,
      headers: {
        'content-type': 'application/json;charset=UTF-8',
        'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36'
      },
      method: 'POST',
    });
    response = new Response(response.body, response);
    response.headers.set('Access-Control-Allow-Origin', '*');
    return response;
  } else {
    const currentSlug = url.pathname.slice(1);
    const pageId = SLUG_TO_PAGE[currentSlug];

    if (pageId) {
      const notionUrl = `https://dudethatserin.notion.site/${pageId.replace(/-/g, '')}`;
      return Response.redirect(notionUrl, 301);
    }

    response = await fetch(url.toString(), {
      body: request.body,
      headers: request.headers,
      method: request.method,
    });
    response = new Response(response.body, response);
    response.headers.delete('Content-Security-Policy');
    response.headers.delete('X-Content-Security-Policy');

    // Soft navigation handling
    if (slugs.indexOf(currentSlug) > -1) {
      const destinationPageId = SLUG_TO_PAGE[currentSlug];
      if (destinationPageId) {
        const notionUrl = `https://dudethatserin.notion.site/${destinationPageId.replace(/-/g, '')}`;
        const { pathname, search, hash } = new URL(notionUrl);
        const redirectUrl = `${MY_DOMAIN}/${currentSlug}${search}${hash}`;
        response.headers.set('Content-Type', 'text/html');
        response.headers.set('Cache-Control', 'no-store');
        response.headers.set('Location', redirectUrl);
        response.status = 302;
        return response;
      }
    }

    return appendJavascript(response, SLUG_TO_PAGE);
  }
}


class MetaRewriter {
  element(element) {
    // Modify meta tags for SEO if needed
  }
}

class HeadRewriter {
  element(element) {
    // Modify head content if needed, e.g., adding custom styles, scripts, or fonts
  }
}

class BodyRewriter {
  constructor(SLUG_TO_PAGE) {
    this.SLUG_TO_PAGE = SLUG_TO_PAGE;
  }

  element(element) {
    // Modify body content if needed
  }
}

async function appendJavascript(res, SLUG_TO_PAGE) {
  return new HTMLRewriter()
    .on('title', new MetaRewriter())
    .on('meta', new MetaRewriter())
    .on('head', new HeadRewriter())
    .on('body', new BodyRewriter(SLUG_TO_PAGE))
    .transform(res);
}

I keep getting some kind of mismatch.

adhinugrahasaputra · 2023-12-02T09:19:24Z

My website is imamhanafi.com , I have used the script above but it is not working. can anyone help why?

blankbro · 2024-01-21T14:22:09Z

I seem to have resolved the issue of requesting login after clicking the back button.
You can go to my website (blankbro.site) to try it out.
My solution is to annotate the following code ↓↓↓

// const open = window.XMLHttpRequest.prototype.open;
// window.XMLHttpRequest.prototype.open = function() {
//   arguments[1] = arguments[1].replace('${MY_DOMAIN}', 'www.notion.so');
//   return open.apply(this, [].slice.call(arguments));
// };

good luck 🎉

wihamedia · 2024-02-14T16:06:03Z

I seem to have resolved the issue of requesting login after clicking the back button. You can go to my website (blankbro.site) to try it out. My solution is to annotate the following code ↓↓↓
// const open = window.XMLHttpRequest.prototype.open;
// window.XMLHttpRequest.prototype.open = function() {
//   arguments[1] = arguments[1].replace('${MY_DOMAIN}', 'www.notion.so');
//   return open.apply(this, [].slice.call(arguments));
// };
good luck 🎉

I have try like this, but still not working.

colinroper · 2024-07-29T16:26:50Z

Has anyone had any luck with this? I haven't figured out how to prevent the Notion login on using the back button.

I'm using https://github.com/velsa/notehost, so the login just flashes for a moment and then correctly redirects, but this behavior isn't ideal.

knownissuewontfix · 2024-08-11T17:44:37Z

I tried @eeshabarua 's fix and @blankbro 's fix and the dark/light fix. None of them worked for me. I found a new fix:

replace this line
history.replaceState(history.state, 'bypass', '/' + page);
to
window.location.href = '/' + page; return;

(also mentioned at #264 (comment))

also cc @DudeThatsErin I saw that your appseeker site is still has the issue, do you want to give it a try?

colinroper · 2024-08-15T16:42:29Z

@knownissuewontfix - that worked for me.

@DudeThatsErin: I'm using notehost and I edited index.cjs to match this suggestion. I'm not very good with Github but I can submit a PR for notehost if you can provide some guidance.

DudeThatsErin · 2024-08-20T18:20:31Z

@knownissuewontfix - that worked for me.

@DudeThatsErin: I'm using notehost and I edited index.cjs to match this suggestion. I'm not very good with Github but I can submit a PR for notehost if you can provide some guidance.

I'm not a maintainer so I can't approve it but this is how: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request

jevanjovandy changed the title ~~Prompt to Login after tapping Back button~~ Notion Ask to Login after tapping Back button Jul 8, 2023

DudeThatsErin mentioned this issue Oct 6, 2023

Most up-to-date combination of code to get your fruition site working! #258

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Notion Ask to Login after tapping Back button #237

Notion Ask to Login after tapping Back button #237

jevanjovandy commented Jul 8, 2023 •

edited

Loading

JustSleightly commented Jul 8, 2023

eeshabarua commented Jul 10, 2023

JackyGohSG commented Jul 11, 2023

smugfox commented Jul 13, 2023

DudeThatsErin commented Jul 14, 2023

melihcelenk commented Jul 20, 2023

jruers commented Jul 21, 2023

gojomo commented Jul 21, 2023

eeshabarua commented Jul 24, 2023 •

edited

Loading

jruers commented Jul 24, 2023

eeshabarua commented Jul 24, 2023

jruers commented Jul 24, 2023

eeshabarua commented Jul 24, 2023

jruers commented Jul 24, 2023

JustSleightly commented Jul 25, 2023

bryange3 commented Jul 26, 2023

bflack commented Jul 26, 2023

olimpa commented Jul 28, 2023

angadsri commented Aug 12, 2023

mbochynski commented Aug 28, 2023 •

edited

Loading

DudeThatsErin commented Sep 1, 2023 •

edited

Loading

adhinugrahasaputra commented Dec 2, 2023

blankbro commented Jan 21, 2024

wihamedia commented Feb 14, 2024

colinroper commented Jul 29, 2024 •

edited

Loading

knownissuewontfix commented Aug 11, 2024

colinroper commented Aug 15, 2024

DudeThatsErin commented Aug 20, 2024

Notion Ask to Login after tapping Back button #237

Notion Ask to Login after tapping Back button #237

Comments

jevanjovandy commented Jul 8, 2023 • edited Loading

JustSleightly commented Jul 8, 2023

eeshabarua commented Jul 10, 2023

JackyGohSG commented Jul 11, 2023

smugfox commented Jul 13, 2023

DudeThatsErin commented Jul 14, 2023

melihcelenk commented Jul 20, 2023

jruers commented Jul 21, 2023

gojomo commented Jul 21, 2023

eeshabarua commented Jul 24, 2023 • edited Loading

jruers commented Jul 24, 2023

eeshabarua commented Jul 24, 2023

jruers commented Jul 24, 2023

eeshabarua commented Jul 24, 2023

jruers commented Jul 24, 2023

JustSleightly commented Jul 25, 2023

bryange3 commented Jul 26, 2023

bflack commented Jul 26, 2023

olimpa commented Jul 28, 2023

angadsri commented Aug 12, 2023

mbochynski commented Aug 28, 2023 • edited Loading

DudeThatsErin commented Sep 1, 2023 • edited Loading

adhinugrahasaputra commented Dec 2, 2023

blankbro commented Jan 21, 2024

wihamedia commented Feb 14, 2024

colinroper commented Jul 29, 2024 • edited Loading

knownissuewontfix commented Aug 11, 2024

colinroper commented Aug 15, 2024

DudeThatsErin commented Aug 20, 2024

jevanjovandy commented Jul 8, 2023 •

edited

Loading

eeshabarua commented Jul 24, 2023 •

edited

Loading

mbochynski commented Aug 28, 2023 •

edited

Loading

DudeThatsErin commented Sep 1, 2023 •

edited

Loading

colinroper commented Jul 29, 2024 •

edited

Loading