Hello
The main reason I had to do this change is a new country specific law regulations which affect my site. My site and the subject is only available for 18+ adults. But I didn’t want to breaks the SEO. So the first thing I thought is makes site login required in specific country this way the Google bot and other can crawl the site in other countries. The full login require is not seems to be a good option as it’s blocked the whole site and it’s contents.
I’ve decided to makes it to client side seems an other good option so use login required in a soft client side way. This one seems enough right now so I started with this.
I think it’s not the best idea to share the full code here I use because it’s probably not the best for other use cases and it’s probably not the final version and of course it’s highly modify the login system.
The whole process is works now with two separate theme component which might be merged in the future.
But before do this I had to modify some other things. First of all, the selected bots we want are exempt from this whole process and can still crawl the site. Discourse have a static login page which is active when the login required
site setting is enabled. Without this when you go to site.com/login
it will redirect you to the site actual homepage and open the login modal. I disabled this function and made it to keep visitor on the /login
page. There are also some other part in applications js file what I had to modify. For example: The canDisplaySidebar()
to hide sidebar to visitors. The loginRequired()
to not require the site setting and be enable to visitors. The showSiteHeader
to only render header when we want to, it renders when the related cookie is enabled.
1. The first theme component. (Policy Gate)
To achieve this I’ve highly modified this component GitHub - discourse/discourse-splash-screen: A welcome splash screen for first time users
I’ve added a gate to the 18+ (Are you over 18?) and some other information in the first screen.
If visitor clicks No, then it will add a key value store item which destroy the 18+ page and redirect visitor to a page published article we wrote about the How addictions effects to youth and why our site is only for adults… and place a key value store to keep visitors in that page. So the key value store item makes two things.
- It destroy the whole 18+ page so visitor can’t change their answer if they click No.
- It redirects them to the article always.
If visitor clicks Yes, then they jump to the second screen which is about the Cookie informations. Here, visitors can inform about the cookies what we use. Clicking the button Alright, I understand we place a cookie consent cookie in the browser for 1 year. This is important because we use this part of the component to the logged in users too. They have to consent the cookie policy every year. So the cookie consent cookie makes three things.
- It destroy the cookie page.
- It renders header (it contains the login, signup buttons).
- It renders the second component and the login page.
2. Second theme component. (Gated Site)
This theme component make the login page template, something like Guest Gate or Gated Category theme components but it renders in URL based and full page. It has two settings.
Allowed url and one for disallowed url.
- Allowed url value is
*
which means it renders the gate on all url.
- Disallowed url value is where we don’t want to render the gate. For example:
/about , /tos, /faq , /privacy , other registration pages
etc…
When it renders it makes auto redirects to the /login
page. I’ve override the whole static login page template with my template which contains the social logins etc… parts. We don’t render the component on the /login
page.
That’s roughly what I made to achieve this.