Laravel Rest API Google Auth at Angular

Question

Authenticating server Api is the problem

I am trying to create an API in laravel and and Angular App in 2 different server. I am not getting a good article which can explain me step by step process.

The problem I am facing is I am not sure what to do with the client_secret I am sure I need to verify this while I authenticate and login on my Angular app (verify on server laravel)

Do I use the redirect url to set it to a laravel route (since google with redirect with the access token on successful login from angular to whatever url I point it to)or do I make a call from angular after I have it in angular scope ie send the id token to a laravel route using a rest call

I am making the laravel api since in future I may have an mobile app and I could reuse the api

I know I may be in a wrong forum. But this is the most responsive forum I know.

Answer 1

You can use JWT for authenticate SPA.

Here good, steps:

1. Create authenticate endpoint

You need provide an endpoint to login. Let's say, /api/v1/login. This endpoint, you should implement JWT as I mention it. So this endpoint should request like this:

HTTP METHOD: POST

headers

{'Content-Type': 'application/json'}

body

{'email': email, 'password': password}

and return a token:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.XbPfbIHMI6arZ3Y922BhjWgQzWXcXNrz0ogtVhfEd2o

This token you should save in life cycle app or better put in local storage js. For security reason, you have to set expired that token.

2. Using token

No you have a token, this token use for authorize user to request secure api. Let's say, user want fetch his profile /api/v1/users/1. Because this api is secure, you need pass token.

HTTP METHOD: GET

headers

{
   'Content-Type': 'application/json',
   'Authorization': "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.XbPfbIHMI6arZ3Y922BhjWgQzWXcXNrz0ogtVhfEd2o"
}

That's it.

Every time you want to access secure (authenticate) endpoint, you should send the header bearer.

Notes:

• Token usually have life time or expired, just make sure that
• If you save token to local storage to avoid loosing token when refresh page, make sure to clear local storage when logout
• Check documentation create token for laravel.

Answer 2

I believe you have two options, based on what you need to achieve. (The way Google Auth works might eliminate the first one - I'm not familiar with that one I'm afraid.)

Option 1)

• you send the user's credentials to your server
• your server will verify the credentials with Google (do they have an SDK or is it more like a Facebook login with it's own UI?)
• if the credentials are valid, you can switch to local authentication (as @hendrathings outlined above)

Option 2)

• you authenticate the user through your Angular App
• if the credentials are valid, you'll forward the response to your server***
• the server can verify the validity by using a public API of Google with the received token
• if the credentials are valid, you can switch to local authentication

*** you could use the redirect URL from Google directly if you wanted to but then (if I understood correctly and you've got two separate apps) you will have to probably do a POST with some derived credentials from your Laravel API to the original app which in turn can do its thing and redirect back to the UI - and that's not really helping with discoverability, and worse, it will introduce unnecessary coupling between your apps so it just does not feel right

Note: I don't know your use case and whether you are intended to use the Google API within your application after the login or just use it as a convenience feature. For that reason I outlined the basic options I think you have but I may be way off here.

Answer 3

Lets say you have an angular app which client_id="angularId" and client_secret="angularsecret" and also you have a mobile applicaiton which has client_id="mobileclientId" and client_secret="mobilesomuchsecret" configured. So google using client_id and secret to identify and secure which client the user want to log in.

After user authenticate with their credentials, google checks the return url of the client you configured in developer console. If it is valid, it returns access_token and id_token in return_url of the client as hash parameter in browser. And you need to store the access_token returned from google in cookies or some localStorage.

What your laravel api need to to is, validate the token that you sent in headers. Thou making request to google about the access_token which you've send with api request. It asks google that if access_token is valid or not? I'm not familiar with laravel but, I'm sure you will find some libraries. Also Check this thread: How can I verify a Google authentication API access token?

Also be careful with authentication if you don't have enough experience. I think you must use a Oidc library in client side. This might help you: https://github.com/manfredsteyer/angular-oauth2-oidc

Answer 4

The best way to implement API authentication like oAuth is using Laravel package "Passport". its easy to install and use. You get detailed step by step installation and usage here for Laravel 5.5: https://laravel.com/docs/5.5/passport or use the documentation as per your Laravel version.

So at the Angular end all you have to use your authorized key for password grant and store the response code in your local storage for future request authentication.

It provides a full OAuth2 server implementation for your Laravel application.

Let me know if you want more help on this. Thanks

Answer 5

Just mention laravel route name. Once you reached laravel routes after redirect from google. Update information what ever you want from controller and redirect to specific angular routes from laravel controller.