CODEWITHSUNDEEP
angularsessionoauth-2.0authorization
rishav
rishav

Reputation: 481

Implementing OAuth 2.0 Authorization code grant in Angular

We have to integrate OAuth 2.0 authorization code grant in my client project. Currently, the app uses a native login page. We need to remove the page and redirect non logged-in users to AS login page, https://as.com/as/authorization.oauth2?client_id=UoM&response_type=code. After successful login at AS end, we are redirected to the configured redirect_uri. At this point, how will my client application know that the user has logged in at AS? How can I maintain the Session at client end? Also, I need to exchange the auth code with and access token and use it for subsequent server API calls. So how can I achieve that and send the token as header?

The application is written in Angular 4. I've never worked on client projects before, hence the confusion.

I just need brief points/code-snippets on how to do this.

Upvotes: 1

Views: 9968

Answers (3)

vd4
vd4

Reputation: 55

You can use state parameter to maintain information between these redirects. State can be passed as query string in https://as.com/as/authorization.oauth2?client_id=UoM&response_type=code. After you receive code in redirect url, which I assume to be some angular component in your case, you can access that code with activatedRoute.queryParams in ngOnInit and can use it to get access token and store it against your user id in some session/local storage. For sending token in header you could have angular interceptor to inject it in authorization header for each API request.

Upvotes: 0

mregulski
mregulski

Reputation: 170

You can use this library to implement OAuth2/OpenID Connect login on your site.

Implicit grant flow should not be used by SPA, more here.

The OAuth2 standard is an authorization framework which is stateless. It means that every time you want to access a resource from a resource server you need to provide a valid access token - it should be provided as an 'Authorization' header. Access token is a short-lived kind of token. The main reason of having such thing is that even if the token is stolen during a connection, the attacker won't be able to use it in the future. Also there is a refresh token. This kind of token allows you to retrieve access tokens without showing login page again until it expires.

Upvotes: 2

Enrico
Enrico

Reputation: 3454

I'm not an expert in this domain, but I'll try to help you as good as I can.

Not entirely sure but I think that for an Angular application (or any other SPA) you should use the Implicit grant flow.

How can I maintain the Session at client end

The web is stateless so there isn't really a session. When you work with tokens (like JWT's) you should renew them before they expire.

I need to exchange the auth code with and access token and use it for subsequent server API calls. So how can I achieve that and send the token as header?

You should call protected API resources with an access token. You can use an interceptor to place an auth header (like a JWT) when doing http calls to your API.

There is a great example of how you can implement this here: https://auth0.com/docs/quickstart/spa/angular2/01-login#configure-auth0

Upvotes: 2

Related Questions