I've have a hard time trying to find a tutorial on how to properly do Social Authentication w/ Strapi and NextJS. I'm able to properly setup Strapi and receive the JSON object containing the JWT and user, but don't know how to properly handle the callback or how to store the JWT in a cookie.
I'm looking to avoid using auth0, passport and just utilise Strapi, React and NextJS to their full potential.
Utilizing Strapi's Example I've created a list of buttons that redirect the user to their providers
const SocialButton = ({ provider }: any) => {
return (
<a href={`https://api.website.com/connect/${provider}`} className={s.link}>
<button className={s[provider]} type='button'>
{provider}
</button>
</a>
);
From there, the request is sent to the server, the token retrieved, the response sent back to the Strapi server, and directed (by Strapi callback) to my site.
This is where I'm stuck.. I'm not sure what to do.. to use something like https://github.com/zeit/swr, UseEffect, GetServerSide.. ext on the API endpoint to capture the response and store it in a cookie?
If someone could help me understand the process in detail. I'd greatly appreciate it.
Related
I would like to create a link that could POST data.
Actually, I have a front in vuejs and a backend in rails.
I already have my own authentication system with Devise gem.
And I would like a user (who is already logged in) to be able to connect to other omniauth services (github, google...).
The problem is that as soon as I go on the link /auth/github (for example) my backend tells me that I didn't send the user's authentication token because i don't know how to send it.
That's why I would like to send datas (here, the auth token) directly from the link
Thanks
Like #Eyeslandic pointed out, your title is misleading, you have an OAuth or OAuth2 problem not a link problem.
If I can guess correctly you are getting a Get response (the token is in the link) and you want it to be a post response (the token in the request body) ... Are you using passport.js ? Must be a matter of configuration.
There is nothing wrong with receiving the token in the link, OAuth protocols are secure enough, whether it's a Get or a Post response.
If you want to read the token from the link, check this answer.
login.get('/p', function(req, res) {
const token = req.query.theReturnedTokenNameInTheLink
res.send("My token is " + token);
});
And the token is just a key that give you access to the host (github, google, facebook ...) Api, you should make another request to those API's, in order to get the user data, you could use a library like passport.js to simplify things, here is one of the tutorials, I found on how to use passport.js
Good luck.
I don't understand the use of JWT token..
Can anyone explain it to me ?
Because currently i'm working on an app (rails + react), and I want to use devise + jwt for authentification and React for frontend.
Actually, I understood that :
1/ If a user want to login: he completes the form, React get Data from form and make a post request of these infos to Rails API.
2/ Rails API get theses infos check in the db if infos match with a registered user, if it is then Rails API will create a JWT token and will send this token to React.
User is now logged in because Rails API found a matched user.
3/ React receive the JWT token. ( ?? what the usage of this token ?? )
thanks
My response is not specific to Rails/React, but rather to all web technologies using JWT tokens:
What you said is correct. From point 3 forward, all the requests made from React to the Rails backend will have to contain the header Authorization: Bearer <token>.
When Rails sees that header, it is able to:
checks the token is valid, by checking its signature
decode it and extract any info stored in it.
Remember that JWT tokens can contain any info the backend wants to store in it. And the client is not able to tamper it, because it is signed cryptographically and it would invalidate its signature.
The above properties (the fact you can store anything in it, that the frontend sends it with every request and that nobody can tamper it) help any web application being able to:
have a shared nothing architecture - because the session is stored completely on the UI, so any backend worker/machine can handle any request
store more info in the session than if they'd use signed cookies for sessions.
Since you are return api . And react is consuming it.
Jwt help to return data you might need to persist in your frontend in react tho. Data like user name or email.
Example : making the header of your website show a user is logged in.
Since you are return api . And react is consuming it.
Jwt help to return data you might need to persist in your frontend in react tho. Data like user name or email.
Example : making the header of your website show a user is logged in.
The main aim of jwt in frontend is basically auth.
Apart .
If you are using a monolith app u deal with session for user
In react case jwt stands in as the session
The main aim of jwt in frontend is basically auth or other.
Apart . If you are using a monolith app remeber u deal with session for user In react case jwt stands in as the session
This question is for anyone who is familiar with
Node.js
Express
Passport
JWT Authentication with passport (JSON Web Tokens)
Facebook OAuth2.0 OR Google OAuth2.0
I have been doing some online courses and understand how to do the two following things:
Authentication using Passport Local Strategy + JWT Tokens
Authentication using Passport Google/Facebook Strategy + Cookie/sessions.
I am trying to combine the content from these two courses basically. I want to use Google Strategy + JWT Authentication. I want to use JWT instead of cookies because my app is going to be a web/mobile/tablet app, and I need to be accessing the api from different domains.
There are two issues I am having with this:
To kick off the Google/facebook OAuth pipelines, you need to call either '/auth/facebook' or '/auth/google'. Both Oauth flows work basically the same so when I say '/auth/google' from now on, I am referring to either. Now the issue I'm having is: On the client, do I call the '/auth/google' route with a href button link or an axios/ajax call? If I use the href or axios/ajax approach I am still getting problems with both solutions.
The href approach problem:
When I assign an <a> tag with a href to '/auth/google' the authentication works perfectly fine. The user gets pushed through the Google Auth flow, they log in and the '/auth/google/callback' route gets called. The problem I have now is how do I correctly send the JWT token back to the client from '/auth/google/callback'?
After a lot of googling I have seen that people have simply passed the the JWT back to the client from the oauth callback in the redirect query param. For example:
res.redirect(301, `/dashboard?token=${tokenForUser(req.user)}`);
The issue I have with this is that now the the ability to authenticate is saved in my browser history! I could log out (destroying the token saved in localStorage), and then simply look at my browser url history, go back to the url that contains the token in the query param, and I would automatically log in again without having to go through the Google Strategy! This is a huge security flaw and is obviously the incorrect way to approach it.
The axios/ajax approach problem:
Now before I explain the problem with this issue, I know for sure that If I get this working, it will solve all issues I was having with the previous href problem. If I manage to call '/google/auth' from an axios.get() call and receive the JWT in the response body, I will not be sending the token as url param, and it will not get saved in the browser history! Perfect right? well there is still some problems with this approach :(
When try to call axios.get('/auth/google') I get the following error:
How I've tried to solve the problem:
I installed cors to my npm server, and added app.use(cors()); to my index.js.
I took a stab and added "http://localhost:3000" to the "Authorised JavaScript origins" in Google developer console.
Neither of these solutions solved the issue, so now I really feel stuck. I want to use the axios/ajax approach, but I'm not sure how to get past this cors error.
Sorry for such a long message, but I really felt I had to give you all the information in order for you to properly help me.
Thanks again, looking forward to hear from you!
I solved this in this way:
On Front-End (can be mobile app) I made login request to Google (or Facebook) and after the user selected his account and logged in I got back response that contained google auth token and basic user info.
Then I sent that google auth token to backend where my API sent one more request to the Google API to confirm that token. (See step 5)
After successful request comes you get basic user info and e-mail. At this point, you can assume that user login via Google is good since google check returned that it's okay.
Then you just signup or login user with that email and create that JWT token.
Return token to your client and just use it for future requests.
I hope it helps. I implemented this multiple times and it showed like a good solution.
Though there is good answer, I wanted to add more information with example.
Passport's google/facebook strategy is session based, it stores user info in cookie which is not advisable. So we need to disable it first
To disable session we need modify our redirect router. For example if we have redirect path /google/redirect like following, we need to pass { session: false } object as parameter.
router.get('/google/redirect', passport.authenticate('google', { session: false }), (req, res)=> {
console.log(":::::::::: user in the redirect", req.user);
//GENERATE JWT TOKEN USING USER
res.send(TOKEN);
})
So where does this user come from? This user comes from passport's callback function. In the previous snippet we have added passport.authenticate(....) This middlewire initiates passport's google-strategy's callback which deals with the user. For example
passport.use(
new GoogleStrategy({
callbackURL: '/google/redirect',
clientID: YOUR_GOOGLE_CLIENT_ID
clientSecret: YOUR_GOOGLE_SECRET_KEY
},
(accessToken, refreshToken, profile, done)=>{
console.log('passport callback function fired');
// FETCH USER FROM DB, IF DOESN'T EXIST CREATE ONE
done(null, user);
})
)
That's it. We have successfully combined JWT and Google/Facebook Strategy.
The solution I found was to do the OAuth flow in a pop-up (window.open), that makes use of a pre-defined callback to pass the token to the front-end upon successful authentication.
Below are the relevant code samples, taken from this tutorial:
https://www.sitepoint.com/spa-social-login-google-facebook/
Here is the pre-defined callback and initial open method, called from your front-end:
window.authenticateCallback = function(token) {
accessToken = token;
};
window.open('/api/authentication/' + provider + '/start');
And here is what your OAuth Callback URL should return, upon successful authentication (which is the last step/page inside your pop-up):
<!-- src/public/authenticated.html -->
<!DOCTYPE html>
<html>
<head>
<title>Authenticated</title>
</head>
<body>
Authenticated successfully.
<script type="text/javascript">
window.opener.authenticateCallback('{{token}}');
window.close();
</script>
</body>
</html>
Your token would now be available to your front-end's pre-defined callback function, where you could easily save it in localStorage.
I suppose though, you could do the OAuth flow in the same window then (sans pop-up) and return an HTML page (similar to the above) that just saves the token and redirects the user to a dashboard immediately.
If your front-end domain was different from your api/auth server, however, you would probably need to redirect from your api/auth server to your front-end with a single-use, time-sensitive token (generated by your api/auth server), that your front-end could then use to call and receive (with axios) your actual token. This way you wouldn't have that browser history security problem.
So I'm trying to do google oauth to get a refresh token for my users (not actually using google oauth to save the user). I had everything working when I used the client side OAuth for google api but they don't provide a refresh token when you do that handshake, only an access_token. I need a persisted refresh_token since I'm going to be making a lot of requests to the users google calendars.
So I set up omniauth on my rails server to make the flow go like this:
user clicks authenticate with google (client side) -->
popup screen goes to backend server (localhost:3001/users/auth/google_oauth2) -->
backend rails server redirects to google for authentication -->
they authenticate with google and get redirected to backend server's callback (localhost:3001/users/auth/google_oauth2/callback) -->
backend server saves token for appropriate user and then redirects back to client side app on localhost:3000 (nothing needs to be done on client, just need the token saved on my server for future use)
I do however need to know that the authentication was successful so I can dispatch appropriate actions in react/redux. In redux-auth they check for the access_token inside the popup.location URI. Problem is when I use this server side popup flow I get this nasty http/https error:
(original image: http://imgur.com/v5NgIGr)
If instead of redirecting back to the client I just redirect to a view in my backend server I could then have a script on that page that just does window.close() which works but seems hacky to me. Another potential solution I was thinking was to try and use the window.postMessage api but I don't know if that has great browser support/also seems hacky. I could emit a message to the other window (the main client app) from the popup saying the oauth was successful so my react code and do whatever it needs to do.
I feel like I'm just approaching this whole flow completely wrong or I'm missing something obvious.
I also feel like if I just had HTTPS on everything it would all work since before when it was 100% client side the popup worked beautifully and I didn't get this SecurityError. I spent some time figuring out how to get my webpack dev server using https and tried doing the same with rails (think I did something wrong on the rails side) but it was still not working. Also feel like I shouldn't need to force HTTPS on all my development servers in order to get it working...
If anyone has any thoughts or could give me some direction that would be much appreciated!!
You are approaching this the wrong way. Google's authentication and their APIs do have confusing documentation. I was also stuck with similar situation and after spending considerable time, I found the right way to do this.
From your question, I believe this seems like the relevant link: https://developers.google.com/identity/sign-in/web/server-side-flow
And following it, here is how your flow should look like:
To map it on your problem, this is what you will do:
user clicks authenticate with google (client side)
Client requests Google for authorization that includes your scopes
and receives a one time authorization code.
Client Sends this authorization code to your ruby server.
Ruby server uses the authorization code to exchange it with access_token and persisted refresh_token which you shall use in your subsequent requests to google apis.
Hope it helps.
My application needs to signup users using Google plus and then display the user's profile data. When the user edits their profile on Google plus and visits my application again, the app needs to show the updated data. Hence the application needs to store the access_token and refresh_token for future use. I want to manage all this using google's js api without any server side google-api-client.
The problem is that I am unable to retrieve the refresh_token using the js api. I have setup a jsfiddle here. The google plus related code is as follows:
$('#signInButton').click(function () {
attributes = {
'accesstype': 'offline',
'clientid': "260932337012-1gdbsh3p7oknkjmeaa7m9q7e6nhhgd9c.apps.googleusercontent.com",
'scope': 'email profile',
'cookiepolicy': 'single_host_origin',
'approvalprompt': 'force',
'callback': signInCallback
};
gapi.auth.signIn(attributes);
});
function signInCallback(authResult) {
alert(authResult.request_token);
}
The refresh_token is not returned inspite of setting accesstype to offline. What am I doing wrong here?
Thanks in advance.
It's impossible to obtain a refresh token using purely the client-side flow with javascript browser based apps. This is a security feature when using the implicit grant type of OAuth 2.0.
The refresh token is for server-side or hybrid flows only.
With javascript only you'll simply need to signin the user again, or if they haven't signed out you can use the 'immediate': true parameter to authenticate them behind the scenes, i.e. without presenting them with another UI popup.