How to make authorization from the SSR application?

How to implement authorization from the SSR application? Interested in applications tipo Nuxt or next (preferably the first).

1. How to do everything yourself, i.e. your hosting? What is the procedure of authentication is needed, what packages to use, are there any starter kits best practices?

2. What third-party services are available, in addition to Auth0?

3. What are the features of this authorization in General (the details of settings etc.)?

Desirable this algorithm: input the email verification link at the end of the authorization password. Also go Google/Facebook.
June 26th 19 at 14:05
1 answer
June 26th 19 at 14:07
1. To start at the SSR don't need to bother - let the rendering always proceeds from the fact that the user is not authorized. Everything else you can load on the client if necessary.
What is the procedure of authentication is needed
- a rather strange issue, as it is for you to decide depending on what the conditions of the problem :) Assuming that you need to know what are the options, I can say that in General their 2 - standard for sites with cookies and sessions, or obtaining a token, and no further authorization on it, then there is a standard story for any REST API.
2. If you mean stateless authorization on the client using OAuth, that is a great library for this. If you do not want to pull such a large dependency, and it is possible to implement - everything is quite simple. Can you tell more specifically if interested. On the backend you can take the ready decision of which pile to any language/framework/CMS.
3. Subtleties especially. Got the token or the session cookie and all. Then everything depends on what exactly you want to implement.

Everything about the process of confirmation email refers to the backend, so it's pretty basic, and SSR does not change anything. Again, there are plenty of ready-made solutions for any platform. OAuth can also give backend, but then you need to understand that then don't get this backend to use for stateless API.
1. How to be in your case with reloading (CTRL+R) page of the personal Cabinet, if you always give the rendering as unauthorized? - Weston_Kul commented on June 26th 19 at 14:10
just petite data of the user after the page is loaded only on the client from the server can (for example) to give the preloader some - victoria64 commented on June 26th 19 at 14:13
and where to describe the logic of access to the private page? Where redirect is to describe in the absence of a token/session/cookies - Weston_Kul commented on June 26th 19 at 14:16
AA can then redirect the client to do? I think it's somehow not Lebowski) saw the examples of ssr where the private pages are rendered on the server - Weston_Kul commented on June 26th 19 at 14:19
and why not redirect on the client, what's wrong with that?)
Well, actually you can redirect at all possible, don't. You can just make a page with the nested router, which shows the form to login, if no user. If the user has just to display the router view, which will show the sub-pages.

Well, if you need to live or be closed to render the page, then just shove a token in the session, and then at the entry point for the server from the session probressive need the headers from cook in axios. - victoria64 commented on June 26th 19 at 14:22
initially, I tried your option on firebase (static CDN + Firestore) without ssr, but whether they have DB's so slow if I'm doing something wrong, although according to their documentation done. In General, while the client sends requests to the server until you get the current user passes the second half-two. At this time, the user sees "enter" and all the rest of the menu for razguliaevo user. It did not suit me.

Then tried SSR. On a private page, put a check on the authorized user, and in case of his absence a redirect to the login. Of course with reboot private page is always redirect, even if you have not logged out since the user does not have time to initialize on the client (1,5-2 sec.)

In the end, the most correct way I found the one you described last. But it requires more in-depth training) and I'm still a noob - Weston_Kul commented on June 26th 19 at 14:25
initially, I tried your option on firebase


I did not have this option, you with someone confused me)

At this time, the user sees "enter" and all the rest of the menu for razguliaevo user.


So give the preloader, what's the problem, the obvious solution)
I, for example, is very simple made - in vuex store there is a field user fetchUser and action that's called in the mounted root component (i.e. only on the client). A user field can have one of 3 choices: null (initializing Stora), false or a user object. fetchUser set either to false (if there is no token, the token has expired, the user is removed - in short, all cases where the user is not logged in), or the object of the user (if the user is logged in). It is very simple:
<div v-if="user === null">Wait, I think I...</div>
<div v-else-if="user === false">Here you can only authorized users</div>
<div v-else>Hello, {{ user.name }}!</div>


On a private page, put a check on the authorized user, and in case of his absence a redirect to the login. Of course with reboot private page is always redirect, even if you have not logged out since the user does not have time to initialize on the client (1,5-2 sec.)


Well, first off, fuck all the user somewhere to send to other page? He's still right on the same page to show the form, don't need to redirect anywhere. How to do it - in my previous comment is written. Well and even if suddenly does well without a redirect will not do - you please option with fetchUser:
{
 mounted() {
 fetchUser().then(user => {
 if (user === false) this.$router.replace('/login');
});
}
}


In the end, the most correct way I found the one you described last


Well, it is in vain, then do the same with him namuchalis. - victoria64 commented on June 26th 19 at 14:28

Find more questions by tags Server-Side RenderingVue.jsJavaScriptOAuthReact